<template>
  <div class="api-details">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-bg">
        <div class="animated-bg"></div>
        <div class="grid-overlay"></div>
        <div class="floating-dots"></div>
      </div>
      <div class="header-content">
        <div class="api-status">
          <span :class="['status-dot', getStatusClass]"></span>
          <span class="status-text">{{ status }}</span>
        </div>
        <div class="title-container">
          <h1 class="api-title" v-if="apiName">{{ apiName }}</h1>
          <h1 class="api-title" v-else>加载中...</h1>
          <span v-if="callCount >= 20" class="hot-tag">
            <i class="fas fa-fire"></i>
            热门
          </span>
        </div>
        <p class="api-desc" v-if="description">{{ description }}</p>
        <div class="api-meta">
          <span class="meta-item">
            <i class="fas fa-clock"></i>
            更新时间: {{ formattedUpdateTime }}
          </span>
          <span class="meta-item">
            <i class="fas fa-eye"></i>
            调用次数: {{ callCount }}
          </span>
          <span class="meta-item">
            <i class="fas fa-user"></i>
            作者: {{ authorName || '未知' }}
          </span>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- API基本信息卡片 -->
        <section class="content-card info-card">
          <div class="card-header">
            <h2><i class="fas fa-info-circle"></i> 基本信息</h2>
          </div>
          <div class="info-section">
            <div class="info-grid">
              <div class="info-item">
                <label>接口状态</label>
                <span :class="['status-badge', getStatusClass]">{{ status }}</span>
              </div>
              <div class="info-item">
                <label>请求方式</label>
                <span class="method-badge">{{ requestMethod }}</span>
              </div>
              <div class="info-item">
                <label>响应格式</label>
                <span class="format-badge">{{ responseFormat }}</span>
              </div>
              <div class="info-item full-width">
                <label>接口地址</label>
                <div class="api-url">
                  <div class="api-url-content">
                    <code ref="urlText">{{ apiAddress }}</code>
                    <button class="copy-btn" @click="copyUrl" :class="{ 'copied': isCopied }">
                      <i class="fas" :class="isCopied ? 'fa-check' : 'fa-copy'"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 请求参数卡片 -->
        <section class="content-card params-card">
          <div class="card-header">
            <h2><i class="fas fa-list"></i> 请求参数</h2>
          </div>
          <div class="params-table">
            <table>
              <thead>
                <tr>
                  <th>参数名</th>
                  <th>类型</th>
                  <th>必填</th>
                  <th>说明</th>
                  <th>示例</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="param in requestParamList" :key="param.id">
                  <td data-label="参数名" class="param-name">{{ param.paramsName }}</td>
                  <td data-label="类型">
                    <span class="type-badge">{{ param.paramsType }}</span>
                  </td>
                  <td data-label="必填">
                    <span :class="['required-badge', param.need ? 'required' : 'optional']">
                      {{ param.need ? '是' : '否' }}
                    </span>
                  </td>
                  <td data-label="说明" class="param-desc">{{ param.note || '-' }}</td>
                  <td data-label="示例">
                    <code class="example-value">{{ param.eg || '-' }}</code>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <!-- 响应参数卡片 -->
        <section class="content-card response-card">
          <div class="card-header">
            <h2><i class="fas fa-reply"></i> 响应参数</h2>
          </div>
          <div class="response-content">
            <div class="copy-wrapper">
              <pre class="response-example">{{ JSON.stringify(responseExample, null, 2) }}</pre>
              <button 
                class="copy-btn" 
                @click="copyResponseExample"
                :class="{ 'copied': isResponseExampleCopied }"
              >
                <i class="fas" :class="isResponseExampleCopied ? 'fa-check' : 'fa-copy'"></i>
                {{ isResponseExampleCopied ? '已复制' : '复制' }}
              </button>
            </div>
          </div>
        </section>

        <!-- 代码生成器组件 -->
        <section class="content-card">
          <GenerateCode 
            :apiUrl="apiAddress"
            :method="requestMethod"
            :params="requestParamList.reduce((acc, param) => {
              acc[param.paramsName] = param.eg || 'value'
              return acc
            }, {})"
          />
        </section>
      </div>

      <!-- 右侧内容 -->
      <div class="content-right">
        <!-- 在线测试卡片 -->
        <section class="content-card test-card">
          <div class="card-header">
            <h2><i class="fas fa-vial"></i> 在线测试</h2>
          </div>
          <div class="test-content">
            <div class="method-select">
              <select v-model="selectedMethod">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="DELETE">DELETE</option>
              </select>
            </div>
            <div class="params-editor">
              <div v-for="(param, index) in dynamicParams" 
                   :key="index"
                   class="param-row">
                <input v-model="param.name" placeholder="参数名" />
                <input v-model="param.value" placeholder="参数值" />
                <button @click="removeParam(index)" class="remove-param">
                  <i class="fas fa-times"></i>
                </button>
              </div>
              <button @click="addParam" class="add-param-btn">
                <i class="fas fa-plus"></i> 添加参数
              </button>
            </div>
            <button @click="testApi" class="test-btn" :disabled="isLoading">
              <i class="fas fa-play"></i> 
              {{ isLoading ? '测试中...' : '开始测试' }}
            </button>
            <div v-if="testResponse" class="test-response">
              <div class="response-header">
                <h3>测试结果</h3>
                <button 
                  class="copy-btn"
                  @click="copyTestResponse"
                  :class="{ 'copied': isTestResponseCopied }"
                >
                  <i class="fas" :class="isTestResponseCopied ? 'fa-check' : 'fa-copy'"></i>
                  {{ isTestResponseCopied ? '已复制' : '复制' }}
                </button>
              </div>
              <div class="response-body">
                <div class="copy-wrapper">
                  <pre class="json-content">{{ formatJson(testResponse) }}</pre>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 调用历史卡片 -->
        <section class="content-card history-card">
          <div class="card-header">
            <h2><i class="fas fa-history"></i> 调用历史</h2>
          </div>
          <div class="history-stats">
            <div class="stat-item">
              <div class="stat-value">{{ avgResponseTime }}ms</div>
              <div class="stat-label">平均响应时间</div>
            </div>
            <div class="response-trend">
              <div class="trend-header">
                <span>响应时间趋势</span>
                <div class="trend-legend">
                  <span class="legend-dot"></span>
                  <span>响应时间(ms)</span>
                </div>
              </div>
              <div class="trend-chart">
                <svg :width="chartWidth" :height="chartHeight" class="line-chart">
                  <!-- 网格线 -->
                  <g class="grid-lines">
                    <line
                      v-for="(line, index) in gridLines"
                      :key="'h-' + index"
                      :x1="padding"
                      :y1="line.y"
                      :x2="chartWidth - padding"
                      :y2="line.y"
                      class="grid-line"
                    />
                  </g>
                  <!-- Y轴刻度值 -->
                  <g class="y-axis">
                    <text
                      v-for="(value, index) in yAxisValues"
                      :key="'y-' + index"
                      :x="padding - 5"
                      :y="getYPosition(value) + 5"
                      class="axis-text"
                    >{{ value }}ms</text>
                  </g>
                  <!-- 折线图 -->
                  <path
                    :d="pathD"
                    class="trend-line"
                  />
                  <!-- 数据点 -->
                  <g class="data-points">
                    <circle
                      v-for="(point, index) in dataPoints"
                      :key="index"
                      :cx="point.x"
                      :cy="point.y"
                      r="4"
                      class="data-point"
                      @mouseover="showTooltip(point, $event)"
                      @mouseout="hideTooltip"
                    />
                  </g>
                </svg>
                <!-- 悬浮提示 -->
                <div v-if="tooltipData" 
                     class="tooltip"
                     :style="tooltipStyle">
                  <div class="tooltip-content">
                    <div>响应时间: {{ tooltipData.value }}ms</div>
                    <div class="tooltip-time">{{ tooltipData.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="history-list">
            <div v-for="(record, index) in apiHistory" 
                 :key="index" 
                 class="history-item">
              <div class="history-time">{{ record.responseTime }}ms</div>
              <div class="history-ip">{{ record.requestIp }}</div>
              <div :class="['history-status', record.requestResult === '成功' ? 'success' : 'error']">
                {{ record.requestResult }}
              </div>
            </div>
          </div>
        </section>

        <!-- Bug修复历史卡片 -->
        <section class="content-card bugfix-card">
          <div class="card-header">
            <h2><i class="fas fa-bug"></i> Bug修复历史</h2>
          </div>
          <div class="bugfix-timeline">
            <div v-if="bugFix && bugFix.length > 0">
              <div v-for="(bug, index) in bugFix" 
                   :key="index"
                   class="bugfix-item">
                <div class="bugfix-version">
                  <span class="version-badge">v{{ bug.version }}</span>
                  <span class="bugfix-date">{{ formatDate(bug.fixTime) }}</span>
                </div>
                <div class="bugfix-content">
                  <p class="bugfix-description">{{ bug.fixBug }}</p>
                </div>
              </div>
            </div>
            <div v-else class="no-bugs">
              <i class="fas fa-check-circle"></i>
              <p>暂无Bug修复记录</p>
            </div>
          </div>
        </section>

        <!-- 评论区 -->
        <section class="comments-section">
          <div class="comments-header">
            <h2><i class="fas fa-comments"></i> 评论交流</h2>
            <span class="comment-count">{{ comments.length }} 条评论</span>
          </div>

          <!-- 评论输入框 -->
          <div class="comment-input-container" :class="{ 'focused': isInputFocused || showNickname }">
            <div class="user-info">
              <div class="user-avatar">
                <img src="/default-avatar.png" alt="用户头像">
              </div>
              <input
                v-show="showNickname"
                v-model="userNickname"
                class="nickname-input"
                placeholder="输入昵称(选填)"
                maxlength="20"
                @focus="handleNicknameFocus"
                @blur="handleNicknameBlur"
              >
              <button v-if="!showNickname" 
                class="add-nickname-btn"
                @click="showNickname = true">
                添加昵称
              </button>
            </div>
            <div class="comment-input-wrapper">
              <textarea
                v-model="newComment"
                placeholder="分享你的想法..."
                @focus="handleFocus"
                @blur="handleBlur"
                ref="commentInput"
              ></textarea>
              
              <div class="comment-toolbar" v-show="isInputFocused">
                <div class="toolbar-left">
                  <button class="toolbar-btn" @click.stop="toggleEmojiPicker">
                    <i class="far fa-smile"></i>
                  </button>
                  <button class="toolbar-btn" @click="showImageUpload">
                    <i class="far fa-image"></i>
                  </button>
                </div>
                <div class="comment-length">{{ newComment.length }}/500</div>
              </div>

              <!-- 表情选择器 -->
              <div v-if="showEmojiPicker" class="emoji-picker" v-click-outside="closeEmojiPicker">
                <div class="emoji-categories">
                  <button 
                    v-for="category in emojiCategories" 
                    :key="category.name"
                    @click.stop="currentEmojiCategory = category.name"
                    :class="{ active: currentEmojiCategory === category.name }"
                    class="category-btn"
                  >
                    <i :class="category.icon"></i>
                  </button>
                </div>
                <div class="emoji-list">
                  <button 
                    v-for="emoji in currentCategoryEmojis" 
                    :key="emoji"
                    @click.stop="insertEmoji(emoji)"
                    class="emoji-btn"
                  >
                    {{ emoji }}
                  </button>
                </div>
              </div>

              <div class="comment-actions" v-show="isInputFocused || newComment">
                <button class="cancel-btn" @click="cancelComment">取消</button>
                <button 
                  class="submit-btn" 
                  @click="submitComment" 
                  :disabled="!newComment.trim()"
                >
                  发布评论
                </button>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <transition-group name="comment-list" tag="div" class="comments-list">
            <template v-if="comments && comments.length > 0">
              <div v-for="comment in comments" :key="comment.id" class="comment-item">
                <div class="comment-avatar">
                  <img src="/default-avatar.png" alt="用户头像">
                </div>
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-author">{{ comment.nickname || `用户${comment.userId}` }}</span>
                    <span class="comment-time">{{ formatCommentTime(comment.createTime) }}</span>
                  </div>
                  <div class="comment-text" v-html="renderContent(comment.content)"></div>
                  <div class="comment-actions">
                    <button 
                      class="action-btn" 
                      @click="likeComment(comment)"
                      :class="{ 'liked': comment.isLiked }"
                    >
                      <i class="fas" :class="comment.isLiked ? 'fa-heart' : 'fa-heart-o'"></i>
                      <span class="like-count" v-if="comment.likeCount > 0">
                        {{ comment.likeCount }}
                      </span>
                    </button>
                    <button class="action-btn" @click="showReplyInput(comment)">
                      <i class="fas fa-reply"></i>
                      回复
                      <span v-if="comment.repliesCount > 0">
                        ({{ comment.repliesCount }})
                      </span>
                    </button>
                  </div>

                  <!-- 回复列表 -->
                  <div class="replies-list" v-if="comment.replies && comment.replies.length > 0">
                    <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                      <div class="reply-avatar">
                        <img src="/default-avatar.png" alt="用户头像">
                      </div>
                      <div class="reply-content">
                        <div class="reply-header">
                          <span class="reply-author">{{ reply.nickname || `用户${reply.userId}` }}</span>
                          <span class="reply-time">{{ formatCommentTime(reply.createTime) }}</span>
                        </div>
                        <div class="reply-text">
                          <template v-if="reply.replyToUserId">
                            回复 <span class="reply-to">@{{ reply.replyToNickname || `用户${reply.replyToUserId}` }}</span>：
                          </template>
                          {{ reply.content }}
                        </div>
                        <div class="reply-actions">
                          <button 
                            class="action-btn" 
                            @click="likeReply(reply)"
                            :class="{ 'liked': reply.isLiked }"
                          >
                            <i class="fas" :class="reply.isLiked ? 'fa-heart' : 'fa-heart-o'"></i>
                            <span class="like-count" v-if="reply.likeCount > 0">
                              {{ reply.likeCount }}
                            </span>
                          </button>
                          <button class="action-btn" @click="showReplyInput(comment, reply)">
                            <i class="fas fa-reply"></i>
                            回复
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 回复输入框 -->
                  <div class="reply-input-container" v-if="activeReplyId === comment.id">
                    <div class="reply-input-wrapper">
                      <input
                        v-if="!replyUserNickname"
                        v-model="replyUserNickname"
                        class="nickname-input"
                        placeholder="输入昵称(选填)"
                        maxlength="20"
                      >
                      <textarea
                        v-model="replyContent"
                        :placeholder="replyToUser ? `回复 @${replyToUser}：` : '写下你的回复...'"
                        ref="replyInput"
                      ></textarea>
                      <div class="reply-actions">
                        <button class="cancel-btn" @click="cancelReply">取消</button>
                        <button 
                          class="submit-btn" 
                          @click="submitReply(comment)"
                          :disabled="!replyContent.trim()"
                        >
                          发布回复
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </transition-group>

          <!-- 加载更多 -->
          <div class="load-more" v-if="hasMoreComments">
            <button class="load-more-btn" @click="loadMoreComments" :disabled="isLoadingMore">
              {{ isLoadingMore ? '加载中...' : '加载更多' }}
            </button>
          </div>
        </section>
      </div>
    </main>

    <!-- 底部版权区域 -->
    <footer class="page-footer">
      <div class="footer-content">
        <div class="footer-wave">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="currentColor" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
          </svg>
        </div>
        <div class="footer-info">
          <div class="tech-support">
            <div class="support-item">
              <i class="fas fa-code"></i>
              <span>Lucas Studio 提供技术支持</span>
            </div>
            <div class="support-item">
              <i class="fas fa-shield-alt"></i>
              <span>黑猫渗透 提供安全服务</span>
            </div>
          </div>
          <div class="copyright">
            © {{ currentYear }} ETNOR-API . All rights reserved.
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import config from '@/config';
import axios from 'axios';
import GenerateCode from './GenerateCode.vue'

export default {
  name: 'ApiDetails',
  components: {
    JsonViewer,
    GenerateCode
  },
  data() {
    return {
      // 视差滚动相关
      scrollPosition: 0,
      
      // 导航相关
      isScrolled: false,
      currentTab: 'overview',
      isDarkMode: false,
      apiid: '',
      
      // API基本信息
      apiName: '',           // API名称
      apiAddress: '',        // API地址
      description: '',       // API描述
      requestMethod: 'GET',  // 请求方法
      responseFormat: 'JSON',// 响应格式
      updateTime: '',        // 更新时间
      authorName: '',        // 作者名称
      status: '',           // API状态
      callCount: 0,         // 调用次数
      
      // 请求参数
      requestParamList: [],  // 参数列表
      dynamicParams: [{ name: '', value: '' }], // 动态参数
      
      // 响应示例
      responseExample: {},   // 响应示例
      
      // 测试相关
      selectedMethod: 'GET', // 选中的请求方法
      testResponse: null,    // 测试响应
      isLoading: false,     // 加载状态
      
      // 历史记录
      apiHistory: [],       // API历史记录
      avgResponseTime: 0,   // 平均响应时间
      
      // Bug修复历史
      bugFix: [],          // Bug修复历史
      
      // 提示消息
      showToast: false,    // 显示提示
      toastMessage: '',    // 提示消息
      currentYear: new Date().getFullYear(), // 当前年份
      chartWidth: 600,
      chartHeight: 200,
      padding: 40,
      tooltipData: null,
      tooltipStyle: {
        left: '0px',
        top: '0px'
      },
      
      // 评论相关
      comments: [],
      newComment: '',
      replyContent: '',
      isInputFocused: false,
      activeReplyId: null,
      replyToUser: null,
      currentPage: 1,
      pageSize: 10,
      hasMoreComments: true,
      isLoadingMore: false,
      userAvatar: 'default-avatar.png', // 当前用户头像
      userNickname: '',
      showEmojiPicker: false,
      currentEmojiCategory: 'smileys',
      emojiCategories: [
        { name: 'smileys', icon: 'far fa-smile', emojis: ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘'] },
        { name: 'gestures', icon: 'far fa-hand-peace', emojis: ['👍', '👎', '👌', '🤞', '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇'] },
        { name: 'hearts', icon: 'fas fa-heart', emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖'] },
        { name: 'animals', icon: 'fas fa-paw', emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮'] },
        { name: 'food', icon: 'fas fa-hamburger', emojis: ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑', '🥭'] }
      ],
      showNickname: false,
      replyUserNickname: '',
      isCopied: false,
      isResponseExampleCopied: false,
      isTestResponseCopied: false,
    }
  },
  computed: {
    formattedUpdateTime() {
      return this.formatDate(this.updateTime);
    },
    getStatusIcon() {
      const icons = {
        1: 'fas fa-check-circle text-success',
        0: 'fas fa-times-circle text-danger',
        2: 'fas fa-exclamation-circle text-warning'
      }
      return icons[this.apiStatus] || 'fas fa-question-circle'
    },
    getStatusText() {
      const status = {
        1: '正常运行',
        0: '服务异常',
        2: '维护中'
      }
      return status[this.apiStatus] || '未知状态'
    },
    getStatusClass() {
      return {
        'active': this.status === '正常',
        'warning': this.status === '维护中',
        'error': this.status === '异常'
      }
    },
    // 计算图表数据点
    dataPoints() {
      if (!this.apiHistory.length) return [];
      
      const points = [];
      const xStep = (this.chartWidth - this.padding * 2) / (this.apiHistory.length - 1);
      
      this.apiHistory.forEach((record, index) => {
        points.push({
          x: this.padding + (xStep * index),
          y: this.getYPosition(record.responseTime),
          value: record.responseTime,
          time: this.formatTime(record.requestTime)
        });
      });
      
      return points;
    },
    
    // 计算SVG路径
    pathD() {
      if (!this.dataPoints.length) return '';
      
      return this.dataPoints.reduce((path, point, index) => {
        return path + (index === 0 ? 'M' : 'L') + point.x + ',' + point.y;
      }, '');
    },
    
    // 计算��格线
    gridLines() {
      const lines = [];
      const step = (this.chartHeight - this.padding * 2) / 4;
      
      for (let i = 0; i <= 4; i++) {
        lines.push({
          y: this.padding + (step * i)
        });
      }
      
      return lines;
    },
    
    // 计算Y轴刻度值
    yAxisValues() {
      if (!this.apiHistory.length) return [];
      
      const values = [];
      const max = Math.max(...this.apiHistory.map(r => r.responseTime));
      const step = Math.ceil(max / 4);
      
      for (let i = 0; i <= 4; i++) {
        values.unshift(step * i);
      }
      
      return values;
    },
    replyPlaceholder() {
      return this.replyToUser ? `回复 @${this.replyToUser}：` : '写下你的回复...';
    },
    currentCategoryEmojis() {
      const category = this.emojiCategories.find(c => c.name === this.currentEmojiCategory);
      return category ? category.emojis : [];
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.fetchApiDetails()
    
    // 初始化视差效果
    this.initParallax()
    this.getApiHistory()
    this.fetchComments()
    
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 视差滚动效果
    parallaxStyle(factor) {
      return {
        transform: `translateY(${this.scrollPosition * factor}px)`
      }
    },
    // 获取API地址
    getApiAddress() {
      return config.getApiUrl();
    },
    handleScroll() {
      this.scrollPosition = window.pageYOffset
      this.isScrolled = window.scrollY > 50
      
      // 更新当前标签
      this.updateCurrentTab()
    },
    initParallax() {
      this.scrollPosition = window.pageYOffset
    },
    
    // 导航相关
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId)
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
      this.currentTab = sectionId
    },
    updateCurrentTab() {
      const sections = ['overview', 'params', 'testing']
      for (const section of sections) {
        const element = document.getElementById(section)
        if (element) {
          const rect = element.getBoundingClientRect()
          if (rect.top <= 100 && rect.bottom >= 100) {
            this.currentTab = section
            break
          }
        }
      }
    },
    //向/api/histroy/log/api/{apiid}获取api历史信息
    async getApiHistory(){
      try {
        const response = await axios.get(`/api/histroy/log/api/${this.$route.params.id}`);
        if(response.data.code === 200) {
          this.apiHistory = response.data.data.apiRequestStatList;
          this.avgResponseTime = response.data.data.avgCount;
        }
      } catch(error) {
        console.error('获取API历史记录失败:', error);
        this.showToastMessage('获取历史记录失败');
      }
    },
    
    // 主题切换
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode
      document.body.classList.toggle('dark-theme')
    },
    
    // API测试相关
    async startTest() {
      this.isLoading = true
      try {
        const response = await fetch(this.apiAddress)
        const data = await response.json()
        this.testResponse = data
      } catch (error) {
        this.showToastMessage('测试失败: ' + error.message)
      } finally {
        this.isLoading = false
      }
    },
    async runTest() {
      this.isLoading = true
      try {
        //先检查是否有空参数
        const emptyParams = this.dynamicParams.filter(param => param.name && param.value === "");
        if(emptyParams.length > 0){
          //有空参数,使用requestParamList里的示例值
          let emptyParamsUrl = '';
          for(const param of emptyParams){
            const paramConfig = this.requestParamList.find(p => p.paramsName === param.name);
            if(paramConfig && paramConfig.eg){
              param.value = paramConfig.eg; //使用示例值
            }
          }
          console.log("发现空参数,已使用示例值填充:", emptyParams);
        }

        //构建最终的参数对象
        const params = this.dynamicParams.reduce((acc, param) => {
          if (param.name) {
            acc[param.name] = param.value
          }
          return acc
        }, {})
        
        //路由里的id
        const apiid = this.$route.params.id;
        const requestUrl = '/api/open/api/'+apiid
        //检查参数值是否为空
        let emptyParamsUrl = ''
        if(Object.values(params).some(value => value === "")){
         //任意为空则提示则使用requestParamList里的参数paramsName和eg拼接，循环遍历requestParamList
        //  for(const param of this.requestParamList){
        //   emptyParamsUrl += param.paramsName + '=' + param.eg + '&'
        //  }
        console.log("params",params)
         console.log('空参数链接'+emptyParamsUrl)
        }
        //将参数拼接到url后面
        const requestUrlWithParams = requestUrl + '?' + Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&')
        console.log('完整请求链接'+requestUrlWithParams)
        const response = await fetch(requestUrlWithParams, {
          method: this.selectedMethod,
          
          body: this.selectedMethod !== 'GET' ? JSON.stringify(params) : undefined
        })
        
        const data = await response.json()
        this.testResponse = data
      } catch (error) {
        this.showToastMessage('测试失败: ' + error.message)
      } finally {
        this.isLoading = false
      }
    },
    
    // 参数管理
    addParam() {
      this.dynamicParams.push({ name: '', value: '' })
    },
    removeParam(index) {
      this.dynamicParams.splice(index, 1)
    },
    
    // 复制相关
    copyToClipboard(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.showToastMessage('复制成功！')
      })
    },
    copyResponse() {
      const text = JSON.stringify(this.testResponse, null, 2)
      this.copyToClipboard(text)
    },
    clearResponse() {
      this.testResponse = null
    },
    
    // 提示消息
    showToastMessage(message) {
      this.toastMessage = message
      this.showToast = true
      setTimeout(() => {
        this.showToast = false
      }, 3000)
    },
    
    // 获取API详情
    async fetchApiDetails() {
      try {
        const response = await fetch(`/api/api/details/${this.$route.params.id}`);
        if (response.ok) {
          const data = await response.json();
          if (data.code === 200) {
            const apiData = data.data;
            const apiid = this.$route.params.id;
            
            // 基本信息
            this.apiName = apiData.apiName || apiData.name;
            // 处理接口地址
            this.apiAddress = `http://etnor.xyz/api/open/api/${apiid}`;  // 本地开发环境
            // this.apiAddress = `https://your-production-domain.com/open-api/${apiid}`;  // 生产环境
            this.description = apiData.note || apiData.description;
            this.requestMethod = apiData.requestMethod || apiData.method || 'GET';
            this.responseFormat = apiData.responseFormat || 'JSON';
            this.updateTime = apiData.updateTime;
            this.authorName = apiData.authorName;
            this.status = apiData.status;
            this.callCount = apiData.callCount || 0;

            console.log('API数据:', apiData);
            console.log('API地址:', this.apiAddress);
            
            // 请求参数
            this.requestParamList = Array.isArray(apiData.requestParamList) 
              ? apiData.requestParamList 
              : [];
              
            // 初始化动态参数
            if (this.requestParamList.length > 0) {
              this.dynamicParams = this.requestParamList.map(param => ({
                name: param.paramsName,
                value: ''
              }));
            }
            
            // 响应示例
            try {
              this.responseExample = apiData.responseExample 
                ? JSON.parse(apiData.responseExample)
                : {};
            } catch (e) {
              console.error('解析响应示例失败:', e);
              this.responseExample = {};
            }
            
            // Bug修复历史
            this.bugFix = apiData.bugFixHistory || [];
            
          } else {
            throw new Error(data.message || '获取API详情失败');
          }
        } else {
          throw new Error('网络请求失败');
        }
      } catch (error) {
        console.error('获取API详情失败:', error);
        this.showToastMessage('获取API详情失败');
      }
    },
    
    // 获取API历史记录
    async getApiHistory() {
      try {
        const response = await axios.get(`/api/histroy/log/api/${this.$route.params.id}`);
        if (response.data.code === 200) {
          this.apiHistory = response.data.data.apiRequestStatList;
          this.avgResponseTime = response.data.data.avgCount;
        } else {
          throw new Error(response.data.message || '获取历史记录失败');
        }
      } catch (error) {
        console.error('获取API历史记录失败:', error);
        this.showToastMessage('获取历史记录失败');
      }
    },
    //获取调用次数向接口/api/histroy/count/api/{apiid}
    async getCallCount() {
      const response = await axios.get(`/api/histroy/count/api/${this.$route.params.id}`);
      if(response.data.code === 200){
        this.callCount = response.data.data;
      }
    },
    
    // 测试API
    async testApi() {
      this.isLoading = true;
      try {
        // 检查空参数
        const emptyParams = this.dynamicParams.filter(param => param.name && param.value === "");
        if (emptyParams.length > 0) {
          // 使用示例值填充
          for (const param of emptyParams) {
            const paramConfig = this.requestParamList.find(p => p.paramsName === param.name);
            if (paramConfig && paramConfig.eg) {
              param.value = paramConfig.eg;
            }
          }
          console.log("发现空参数,已使用示例值填充:", emptyParams);
        }

        // 构建参数
        const params = this.dynamicParams.reduce((acc, param) => {
          if (param.name) {
            acc[param.name] = param.value;
          }
          return acc;
        }, {});
        
        // 构建请求URL
        const apiid = this.$route.params.id;
        const baseUrl = 'http://etnor.xyz/api/open/api/';
        const requestUrl = baseUrl + apiid;
        const requestUrlWithParams = requestUrl + '?' + Object.entries(params)
          .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
          .join('&');
           
        console.log('完整请求链接:', requestUrlWithParams);
        
        // 发送请求
        const response = await fetch(requestUrlWithParams, {
          method: this.selectedMethod,
          headers: {
            'Content-Type': 'application/json'
          },
          body: this.selectedMethod !== 'GET' ? JSON.stringify(params) : undefined
        });
        
        const data = await response.json();
        this.testResponse = data;
        
      } catch (error) {
        console.error('测试失败:', error);
        this.showToastMessage('测试失败: ' + error.message);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 工具方法
    formatDate(timestamp) {
      if (!timestamp) return '-';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    formatJson(data) {
      try {
        return JSON.stringify(data, null, 2)
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
      } catch (error) {
        return JSON.stringify(data);
      }
    },
    
    async copyToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        this.showToastMessage('复制成功');
      } catch (err) {
        this.showToastMessage('复制失败');
      }
    },
    
    copyResponse() {
      const text = JSON.stringify(this.testResponse, null, 2);
      this.copyToClipboard(text);
    },
    
    addParam() {
      this.dynamicParams.push({ name: '', value: '' });
    },
    
    removeParam(index) {
      this.dynamicParams.splice(index, 1);
    },
    
    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    // 获取Y轴坐标
    getYPosition(value) {
      if (!this.apiHistory.length) return 0;
      
      const max = Math.max(...this.apiHistory.map(r => r.responseTime));
      const chartHeight = this.chartHeight - this.padding * 2;
      return this.chartHeight - this.padding - (value / max * chartHeight);
    },
    
    // 显示提示框
    showTooltip(point, event) {
      this.tooltipData = point;
      this.tooltipStyle = {
        left: (point.x + 10) + 'px',
        top: (point.y - 10) + 'px'
      };
    },
    
    // 隐藏提示框
    hideTooltip() {
      this.tooltipData = null;
    },
    
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
    },
    
    // 获取评论列表
    async fetchComments() {
      console.log('获取评论列表')
      try {
        const response = await axios.get(`/api/comments/api/${this.$route.params.id}`);
        console.log('评论数据:', response.data);
        if (response.data && Array.isArray(response.data)) {
          this.comments = response.data;
        } else if (response.data.code === 200 && Array.isArray(response.data.data)) {
          this.comments = response.data.data;
        }
        console.log('处理后的评论数据:', this.comments);
      } catch (error) {
        console.error('获取评论失败:', error);
        this.showToastMessage('获取评论失败');
      }
    },

    // 提交评论
    async submitComment() {
      if (!this.newComment.trim()) return;
      
      try {
        const response = await axios.post('/api/comments', {
          apiId: this.$route.params.id,
          content: this.newComment.trim(),
          userId: Date.now(), // 使用时间戳作为临时用户ID
          nickname: this.userNickname.trim() || null
        });
        
        if (response.data && Array.isArray(response.data)) {
          this.comments.unshift(response.data[0]);
        } else if (response.data.code === 200) {
          this.comments.unshift(response.data.data);
        }
        this.newComment = '';
        this.showEmojiPicker = false;
        this.isInputFocused = false;
        this.showToastMessage('评论发布成功');
      } catch (error) {
        console.error('发布评论失败:', error);
        this.showToastMessage('发布评论失败');
      }
    },

    // 提交回复
    async submitReply(comment) {
      if (!this.replyContent.trim()) return;
      
      try {
        const response = await axios.post('/api/replies', {
          commentId: comment.id,
          content: this.replyContent.trim(),
          userId: Date.now(), // 临时用户ID
          nickname: this.replyUserNickname.trim() || null,
          replyToUserId: this.replyToUser ? parseInt(this.replyToUser.replace(/[^0-9]/g, '')) : null,
          replyToNickname: this.replyToUser
        });
        
        if (response.data && Array.isArray(response.data)) {
          if (!comment.replies) comment.replies = [];
          comment.replies.push(response.data[0]);
          comment.repliesCount = (comment.repliesCount || 0) + 1;
        } else if (response.data.code === 200) {
          if (!comment.replies) comment.replies = [];
          comment.replies.push(response.data.data);
          comment.repliesCount = (comment.repliesCount || 0) + 1;
        }
        
        this.cancelReply();
        this.showToastMessage('回复发布成功');
      } catch (error) {
        console.error('发布回复失败:', error);
        this.showToastMessage('发布回复失败');
      }
    },

    // 点赞评论
    async likeComment(comment) {
      try {
        const response = await axios.post('/api/likes', {
          userId: Date.now(), // 临时用户ID
          targetId: comment.id,
          targetType: 1 // 1表示评论
        });
        
        if (response.data && Array.isArray(response.data)) {
          comment.isLiked = true;
          comment.likeCount = (comment.likeCount || 0) + 1;
        } else if (response.data.code === 200) {
          comment.isLiked = true;
          comment.likeCount = (comment.likeCount || 0) + 1;
        }
      } catch (error) {
        console.error('点赞失败:', error);
        this.showToastMessage('点赞失败');
      }
    },

    // 点赞回复
    async likeReply(reply) {
      try {
        const response = await axios.post('/api/likes', {
          userId: Date.now(), // 临时用户ID
          targetId: reply.id,
          targetType: 2 // 2表示回复
        });
        
        if (response.data && Array.isArray(response.data)) {
          reply.isLiked = true;
          reply.likeCount = (reply.likeCount || 0) + 1;
        } else if (response.data.code === 200) {
          reply.isLiked = true;
          reply.likeCount = (reply.likeCount || 0) + 1;
        }
      } catch (error) {
        console.error('点赞失败:', error);
        this.showToastMessage('点赞失败');
      }
    },

    // 加载更多评论
    async loadMoreComments() {
      if (this.isLoadingMore || !this.hasMoreComments) return;
      
      this.isLoadingMore = true;
      this.currentPage += 1;
      await this.fetchComments();
      this.isLoadingMore = false;
    },

    // UI 交互方法
    handleFocus() {
      this.isInputFocused = true;
    },

    handleBlur(e) {
      // 检查点击的元素是否在表情选择器内
      const isClickInEmojiPicker = e.relatedTarget && 
        (e.relatedTarget.closest('.emoji-picker') || 
         e.relatedTarget.closest('.toolbar-btn'));
      
      if (!isClickInEmojiPicker && !this.newComment) {
        this.isInputFocused = false;
      }
    },

    cancelComment() {
      this.newComment = '';
      this.isInputFocused = false;
    },

    showReplyInput(comment, reply = null) {
      this.activeReplyId = comment.id;
      this.replyToUser = reply ? (reply.nickname || `用户${reply.userId}`) : (comment.nickname || `用户${comment.userId}`);
      this.replyContent = '';
      this.$nextTick(() => {
        this.$refs.replyInput?.[0]?.focus();
      });
    },

    cancelReply() {
      this.activeReplyId = null;
      this.replyContent = '';
      this.replyToUser = null;
      this.replyUserNickname = '';
    },

    formatCommentTime(timestamp) {
      const now = new Date();
      const commentTime = new Date(timestamp);
      const diff = now - commentTime;
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚';
      }
      // 小于1小时
      if (diff < 3600000) {
        return `${Math.floor(diff / 60000)}分钟前`;
      }
      // 小于24小时
      if (diff < 86400000) {
        return `${Math.floor(diff / 3600000)}小时前`;
      }
      // 小于30天
      if (diff < 2592000000) {
        return `${Math.floor(diff / 86400000)}天前`;
      }
      // 大于30天显示具体日期
      return this.formatDate(timestamp);
    },
    insertEmoji(emoji) {
      const textarea = this.$refs.commentInput;
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      this.newComment = this.newComment.substring(0, start) + emoji + this.newComment.substring(end);
      this.$nextTick(() => {
        textarea.focus();
        textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
        this.showEmojiPicker = false; // 插入表情后关闭选择器
      });
    },
    renderContent(content) {
      // 转义HTML特殊字符
      return content
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    },
    showImageUpload() {
      // TODO: 实现图片上传功能
      this.showToastMessage('图片上传功能即将上线');
    },
    closeEmojiPicker() {
      this.showEmojiPicker = false;
    },
    toggleEmojiPicker(event) {
      event.stopPropagation();
      this.showEmojiPicker = !this.showEmojiPicker;
    },
    handleNicknameFocus() {
      this.showNickname = true;
    },
    handleNicknameBlur() {
      if (!this.userNickname.trim()) {
        this.showNickname = false;
      }
    },
    async copyUrl() {
      try {
        const text = this.$refs.urlText.textContent;
        await navigator.clipboard.writeText(text);
        this.isCopied = true;
        setTimeout(() => {
          this.isCopied = false;
        }, 2000);
      } catch (err) {
        console.error('复制失败:', err);
      }
    },
    // 复制响应示例
    async copyResponseExample() {
      try {
        const text = JSON.stringify(this.responseExample, null, 2);
        await navigator.clipboard.writeText(text);
        this.isResponseExampleCopied = true;
        setTimeout(() => {
          this.isResponseExampleCopied = false;
        }, 2000);
        this.showToastMessage('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
        this.showToastMessage('复制失败');
      }
    },

    // 复制测试响应
    async copyTestResponse() {
      try {
        const text = JSON.stringify(this.testResponse, null, 2);
        await navigator.clipboard.writeText(text);
        this.isTestResponseCopied = true;
        setTimeout(() => {
          this.isTestResponseCopied = false;
        }, 2000);
        this.showToastMessage('复制成功');
      } catch (err) {
        console.error('复制失败:', err);
        this.showToastMessage('复制失败');
      }
    },
  },
  
  // 生命周期钩子
  async mounted() {
    console.log('组件挂载，开始获取数据');
    await this.fetchApiDetails();
    await this.getApiHistory();
    await this.getCallCount();
    console.log('数据获取完成，API名称:', this.apiName);
    console.log('组件mounted，comments数组:', this.comments);
  },
  created() {
    console.log('组件created，开始获取评论');
    this.fetchComments();
  },
  watch: {
    comments: {
      immediate: true,
      handler(newComments) {
        console.log('comments数组变化，当前长度:', newComments.length);
      }
    }
  }
}
</script>

<style>
.api-details {
  width: 100%;
  position: relative;
}

.main-content {
  width: 100%;
  max-width: 1200px;
  margin: -4rem auto 0;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 400px);
  gap: 2rem;
  box-sizing: border-box;
}

.content-left,
.content-right {
  width: 100%;
  min-width: 0;
}

.content-card {
  width: 100%;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 1rem;
    margin-top: -2rem;
    width: 100%;
  }

  .content-left,
  .content-right {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .content-card {
    width: 100%;
    margin: 0 0 1rem 0;
    border-radius: 1rem;
  }

  .info-section {
    padding: 1rem;
  }

  .info-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .api-url {
    width: 100%;
    box-sizing: border-box;
  }

  .api-url-content {
    width: 100%;
    flex-wrap: wrap;
  }

  .api-url code {
    width: calc(100% - 44px);
    word-break: break-all;
  }

  /* 确保页面内容不会超出屏幕 */
  .api-details {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 调整页面头部在移动端的显示 */
  .page-header {
    padding: 2rem 1rem 4rem;
  }

  .header-content {
    padding: 0;
  }

  /* 确保所有内容都在安全区域内 */
  .api-details {
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* 页面头部样式优化 */
.page-header {
  position: relative;
  min-height: 400px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 4rem 0 6rem;
  margin-bottom: -4rem;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.animated-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: linear-gradient(45deg, 
    rgba(255,255,255,0.1) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255,255,255,0.1) 50%, 
    rgba(255,255,255,0.1) 75%, 
    transparent 75%, 
    transparent);
  background-size: 100px 100px;
  animation: slide 30s linear infinite;
  opacity: 0.1;
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: pulse 3s ease-in-out infinite;
}

.floating-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: float 20s linear infinite;
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.api-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  margin-bottom: 1.5rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.status-dot.active {
  background: #4ade80;
}

.api-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  word-break: break-word;
  line-height: 1.2;
  display: block;
}

.api-title.loading {
  opacity: 0.7;
}

.api-desc {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  max-width: 800px;
}

.api-meta {
  display: flex;
  gap: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

/* 主内容区域优化 */
.main-content {
  width: 100%;
  max-width: 1200px;
  margin: -4rem auto 0;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.content-left {
  width: 100%;
  overflow: visible;
}

.content-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem;
  width: 100%;
  position: relative;
  overflow: visible;
}

.info-section {
  padding: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.info-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width: 100%;
  overflow: visible;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  overflow: visible;
}

.info-item.full-width {
  grid-column: 1 / -1;
  overflow: visible;
}

.api-url {
  position: relative;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.api-url-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  overflow: visible;
}

.api-url code {
  flex: 1;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

.copy-btn {
  flex-shrink: 0;
  padding: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  color: #6366f1;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.copy-btn:hover {
  background: #f8fafc;
  border-color: #6366f1;
}

.copy-btn.copied {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}

.copy-btn i {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .api-url {
    padding: 0.625rem 0.75rem;
  }

  .api-url code {
    font-size: 0.8125rem;
  }

  .copy-btn {
    width: 32px;
    height: 32px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 0 1rem;
    gap: 1rem;
    margin-top: -2rem;
    overflow: visible;
  }

  .content-card {
    margin-bottom: 1rem;
    overflow: visible;
  }

  .info-section {
    padding: 1rem;
    overflow: visible;
  }

  .info-grid {
    gap: 1rem;
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .content-card {
    background: #1e293b;
  }

  .info-item label {
    color: #94a3b8;
  }
}

/* 卡片样式优化 */
.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s;
}

.content-card:hover::before {
  opacity: 1;
}

/* 动画定义 */
@keyframes slide {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 50%);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes float {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    min-height: 300px;
    padding: 3rem 0 5rem;
  }
  
  .api-title {
    font-size: 2rem;
  }
  
  .api-desc {
    font-size: 1rem;
  }
  
  .api-meta {
    flex-direction: column;
    gap: 1rem;
  }
}

/* 主要内容区样式 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

/* 卡片通用样式 */
.content-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-bottom: 2rem;
  overflow: hidden;
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.card-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 基本信息卡片样式 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-size: 0.875rem;
  color: #6b7280;
}

.api-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.api-url code {
  flex: 1;
  font-family: monospace;
  color: #374151;
}

/* 状态标签样式 */
.status-badge,
.method-badge,
.format-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge {
  background: #dcfce7;
  color: #166534;
}

.method-badge {
  background: #dbeafe;
  color: #1e40af;
}

.format-badge {
  background: #f3e8ff;
  color: #6b21a8;
}

/* 请求参数表格样式 */
.params-table {
  padding: 1.5rem;
  overflow-x: auto;
}

.params-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.params-table th {
  background: #f8fafc;
  padding: 1rem;
  text-align: left;
  font-weight: 500;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.params-table td {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.params-table tr:hover {
  background: #f8fafc;
}

.param-name {
  color: #2563eb;
  font-weight: 500;
}

.type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.875rem;
}

.required-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-align: center;
}

.required-badge.required {
  background: #fee2e2;
  color: #dc2626;
}

.required-badge.optional {
  background: #dcfce7;
  color: #16a34a;
}

.example-value {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  border-radius: 0.375rem;
  font-family: monospace;
  font-size: 0.875rem;
  color: #475569;
}

/* 响应示例样式 */
.response-content {
  padding: 1.5rem;
  position: relative;
}

.response-example {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1.5rem;
  border-radius: 0.5rem;
  font-family: monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  white-space: pre-wrap;
  position: relative;
}

.copy-wrapper {
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 0.375rem;
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 10;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.copy-btn.copied {
  background: #22c55e;
  color: white;
}

.copy-btn i {
  font-size: 1rem;
}

/* 测试响应样式 */
.test-response {
  margin-top: 1.5rem;
  background: #f8fafc;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.response-header h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;
  margin: 0;
}

.response-body {
  position: relative;
  max-height: 400px;
  overflow-y: auto;
}

.json-content {
  margin: 0;
  padding: 1rem;
  background: #1e293b;
  color: #e2e8f0;
  font-family: 'Fira Code', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}

/* 自定义滚动条样式 */
.response-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.response-body::-webkit-scrollbar-track {
  background: #334155;
}

.response-body::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 4px;
}

.response-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.copy-btn {
  padding: 0.5rem;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s;
}

.copy-btn:hover {
  color: #374151;
}

/* 调用历史样式 */
.history-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8fafc;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #6366f1;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.history-list {
  padding: 1.5rem;
}

.history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.history-time {
  font-family: monospace;
  color: #6366f1;
  font-weight: 500;
}

.history-ip {
  color: #64748b;
  font-size: 0.875rem;
}

.history-status {
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.history-status.success {
  background: #dcfce7;
  color: #166534;
}

.history-status.error {
  background: #fee2e2;
  color: #dc2626;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .api-meta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .param-row {
    grid-template-columns: 1fr;
  }
}

/* 底部版权区域样式 */
.page-footer {
  position: relative;
  margin-top: 4rem;
  padding: 4rem 0 2rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #475569;
  overflow: hidden;
}

.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  color: #6366f1;
}

.footer-wave svg {
  position: relative;
  width: 100%;
  height: 80px;
}

.footer-content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.footer-info {
  position: relative;
  z-index: 1;
}

.tech-support {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

.support-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: white;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.support-item:hover {
  transform: translateY(-2px);
}

.support-item i {
  color: #6366f1;
  font-size: 1.25rem;
}

.support-item span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
}

.copyright {
  font-size: 0.875rem;
  color: #64748b;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .tech-support {
    flex-direction: column;
    gap: 1rem;
  }
  
  .support-item {
    width: 100%;
    justify-content: center;
  }
}

/* Bug修复历史样式 */
.bugfix-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
}

.bugfix-timeline {
  padding: 1.5rem;
}

.bugfix-item {
  position: relative;
  padding: 1.5rem 0;
  padding-left: 2rem;
  border-left: 2px solid #e2e8f0;
}

.bugfix-item:last-child {
  padding-bottom: 0;
}

.bugfix-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 2rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.bugfix-version {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.version-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #ede9fe;
  color: #6366f1;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.bugfix-date {
  color: #64748b;
  font-size: 0.875rem;
}

.bugfix-description {
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.no-bugs {
  text-align: center;
  padding: 3rem 0;
  color: #64748b;
}

.no-bugs i {
  font-size: 3rem;
  color: #4ade80;
  margin-bottom: 1rem;
}

.no-bugs p {
  font-size: 0.9rem;
  margin: 0;
}

/* 动画效果 */
.bugfix-item {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.response-trend {
  flex: 1;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: #475569;
  font-size: 0.875rem;
}

.trend-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6366f1;
}

.trend-chart {
  position: relative;
  width: 100%;
  height: 200px;
}

.line-chart {
  width: 100%;
  height: 100%;
}

.grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
  stroke-dasharray: 4;
}

.axis-text {
  fill: #94a3b8;
  font-size: 12px;
  text-anchor: end;
}

.trend-line {
  fill: none;
  stroke: #6366f1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2));
}

.data-point {
  fill: white;
  stroke: #6366f1;
  stroke-width: 2;
  transition: all 0.2s;
  cursor: pointer;
}

.data-point:hover {
  fill: #6366f1;
  r: 6;
}

.tooltip {
  position: absolute;
  background: white;
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -100%);
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}

.tooltip-content {
  font-size: 0.875rem;
  color: #1e293b;
}

.tooltip-time {
  color: #64748b;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .history-stats {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    gap: 1.5rem;
  }

  .response-trend {
    order: -1; /* 图表移到最左边 */
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0;
  }

  .trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
  }

  .trend-chart {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: visible;
  }

  .line-chart {
    width: 100% !important;
    height: 100% !important;
  }

  .stat-item {
    width: 100%;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: #6366f1;
    margin-bottom: 0.5rem;
  }

  .stat-label {
    font-size: 1rem;
    color: #64748b;
  }

  /* 优化图表样式 */
  .grid-line {
    stroke: #e2e8f0;
    stroke-width: 1;
  }

  .trend-line {
    stroke-width: 2.5;
  }

  .data-point {
    r: 4;
  }

  .data-point:hover {
    r: 6;
  }

  .axis-text {
    font-size: 0.75rem;
  }

  .tooltip {
    background: white;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }

  /* 图例样式 */
  .trend-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #64748b;
  }

  .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
  }
}

/* 移动端适配优化 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  .api-details {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
  }

  .page-header {
    min-height: auto;
    padding: 2rem 1rem 4rem 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: -2rem;
  }

  .header-content {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .main-content {
    width: 100%;
    max-width: 100vw;
    grid-template-columns: 1fr;
    padding: 1rem;
    box-sizing: border-box;
    margin: 0;
    gap: 1rem;
  }

  .content-card {
    width: 100%;
    margin: 0 0 1rem 0;
    box-sizing: border-box;
  }

  .params-table {
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .params-table table {
    width: 100%;
    table-layout: fixed;
  }

  .params-table th,
  .params-table td {
    padding: 0.75rem;
    font-size: 0.875rem;
    word-break: break-word;
    white-space: normal;
  }

  .response-example {
    max-width: 100%;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .test-content {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  .param-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .param-row input {
    width: 100%;
    box-sizing: border-box;
  }

  .history-stats {
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .response-trend {
    width: 100%;
    margin: 1rem 0;
    box-sizing: border-box;
  }

  .trend-chart {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .history-list {
    width: 100%;
    box-sizing: border-box;
  }

  .history-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-content {
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .tech-support {
    flex-direction: column;
    width: 100%;
  }

  .support-item {
    width: 100%;
    box-sizing: border-box;
  }

  /* 确保所有内容都在视口内 */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* 优化滚动 */
  .api-details {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 禁用水平滚动 */
  .api-details,
  .main-content,
  .content-card,
  .params-table,
  .response-example,
  .test-content,
  .history-stats,
  .response-trend,
  .history-list {
    overflow-x: hidden !important;
  }

  /* 优化表格显示 */
  .params-table {
    display: block;
    width: 100%;
  }

  .params-table table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }

  .params-table th,
  .params-table td {
    display: table-cell;
    width: auto;
  }

  /* 优化响应示例显示 */
  pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  /* 优化图表显示 */
  svg {
    width: 100% !important;
    height: auto !important;
  }
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* 热门标签样式 */
.hot-tag {
  position: absolute;
  top: -0.5rem;
  right: -3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
  border-radius: 1rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  animation: pulse-hot 2s infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  z-index: 2;
}

.hot-tag::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shine 3s infinite;
  transform: rotate(45deg);
}

.hot-tag i {
  font-size: 0.875rem;
  animation: flicker 1.5s infinite;
}

@keyframes pulse-hot {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .hot-tag {
    top: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .hot-tag i {
    font-size: 0.75rem;
  }
}

.title-container {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.hot-tag {
  position: absolute;
  top: -0.5rem;
  right: -3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
  border-radius: 1rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  animation: pulse-hot 2s infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  z-index: 2;
}

.hot-tag::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: shine 3s infinite;
  transform: rotate(45deg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .title-container {
    width: 100%;
  }

  .hot-tag {
    top: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  .api-title {
    padding-right: 4rem; /* 为热门标签预留空间 */
  }
}

/* 评论区样式 */
.comments-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.comments-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a237e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-count {
  color: #64748b;
  font-size: 0.875rem;
  background: #f8fafc;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
}

/* 评论输入框 */
.comment-input-container {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  margin-bottom: 2rem;
}

.comment-input-container.focused {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.add-nickname-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px dashed #e2e8f0;
  color: #6366f1;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.add-nickname-btn:hover {
  background: #f8fafc;
  border-color: #6366f1;
}

.nickname-input {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  width: 200px;
  background: white;
}

.nickname-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.comment-input-wrapper {
  position: relative;
}

textarea {
  width: 100%;
  min-height: 100px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  resize: vertical;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.comment-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.toolbar-left {
  display: flex;
  gap: 0.5rem;
}

.toolbar-btn {
  background: transparent;
  border: none;
  color: #64748b;
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #f1f5f9;
  color: #6366f1;
}

.comment-length {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* 表情选择器 */
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  width: 350px;
  z-index: 1000;
  border: 1px solid #e2e8f0;
}

.emoji-categories {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}

.emoji-categories::-webkit-scrollbar {
  display: none;
}

.category-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  flex-shrink: 0;
}

.category-btn.active {
  background: #f1f5f9;
  color: #6366f1;
}

.emoji-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
}

.emoji-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  background: #f1f5f9;
  transform: scale(1.1);
}

/* 评论列表动画 */
.comment-list-enter-active,
.comment-list-leave-active {
  transition: all 0.5s ease;
}

.comment-list-enter-from,
.comment-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 评论项样式 */
.comment-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.comment-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.action-btn {
  background: transparent;
  border: none;
  color: #64748b;
  padding: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.action-btn:hover {
  background: #f1f5f9;
  color: #6366f1;
}

.action-btn.liked {
  color: #ef4444;
}

.action-btn.liked:hover {
  background: #fef2f2;
}

.no-comments {
  text-align: center;
  padding: 3rem 0;
  color: #94a3b8;
}

.no-comments i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .comments-section {
    padding: 0 1rem;
  }

  .comment-input-container {
    padding: 1rem;
  }

  .emoji-picker {
    width: calc(100vw - 2rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .emoji-list {
    grid-template-columns: repeat(6, 1fr);
  }

  .comment-item {
    padding: 1rem;
  }
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 增加昵称和时间的间距 */
  margin-bottom: 0.75rem;
}

.comment-author {
  font-weight: 600;
  color: #1a237e;
  font-size: 0.95rem;
}

.comment-time {
  color: #64748b;
  font-size: 0.85rem;
  position: relative;
  padding-left: 1rem;
}

.comment-time::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #cbd5e1;
}

/* 表情选择器样式优化 */
.emoji-picker {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  width: 350px;
  z-index: 1000;
  border: 1px solid #e2e8f0;
}

.emoji-categories {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}

.emoji-categories::-webkit-scrollbar {
  display: none;
}

.category-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  flex-shrink: 0;
}

.category-btn.active {
  background: #f1f5f9;
  color: #6366f1;
}

.emoji-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
}

.emoji-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  background: #f1f5f9;
  transform: scale(1.1);
}

/* 评论操作按钮样式优化 */
.comment-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: #f1f5f9;
  color: #6366f1;
}

.action-btn.liked {
  color: #ef4444;
}

.action-btn.liked:hover {
  background: #fef2f2;
}

.action-btn i {
  font-size: 1rem;
}

/* 加载更多按钮美化 */
.load-more {
  text-align: center;
  margin: 2rem 0;
}

.load-more-btn {
  padding: 0.75rem 2rem;
  background: white;
  border: 2px solid #e2e8f0;
  color: #64748b;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.load-more-btn:hover {
  background: #f8fafc;
  border-color: #6366f1;
  color: #6366f1;
}

.load-more-btn:disabled {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.load-more-btn i {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .emoji-picker {
    width: calc(100vw - 2rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .emoji-list {
    grid-template-columns: repeat(6, 1fr);
  }

  .load-more-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 回复列表样式 */
.replies-list {
  margin-left: 2.5rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #e2e8f0;
}

.reply-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
}

.reply-item:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}

.reply-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.reply-author {
  font-weight: 500;
  color: #1a237e;
  font-size: 0.875rem;
}

.reply-time {
  color: #64748b;
  font-size: 0.75rem;
}

.reply-text {
  color: #334155;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.reply-to {
  color: #6366f1;
  font-weight: 500;
}

/* 回复输入框样式 */
.reply-input-container {
  margin-top: 1rem;
  margin-left: 2.5rem;
  padding-left: 1rem;
}

.reply-input-wrapper {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reply-input-wrapper textarea {
  min-height: 80px;
  margin-bottom: 0.5rem;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cancel-btn,
.submit-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.cancel-btn:hover {
  background: #f1f5f9;
}

.submit-btn {
  background: #6366f1;
  color: white;
  border: none;
}

.submit-btn:hover {
  background: #4f46e5;
}

.submit-btn:disabled {
  background: #e2e8f0;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .replies-list {
    margin-left: 1rem;
    padding-left: 0.5rem;
  }

  .reply-input-container {
    margin-left: 1rem;
    padding-left: 0.5rem;
  }
}

  /* 移动端适配样式 */
  @media (max-width: 768px) {
    .page-header {
      min-height: 300px;
      padding: 2rem 1rem 4rem;
    }

    .api-title {
      font-size: 1.75rem;
      margin-bottom: 0.75rem;
    }

    .api-desc {
      font-size: 1rem;
    }

    .api-meta {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .meta-item {
      width: calc(50% - 0.375rem);
      justify-content: center;
      font-size: 0.8rem;
    }

    .main-content {
      margin-top: -3rem;
      padding: 0 1rem;
    }

    .content-card {
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .card-header h2 {
      font-size: 1.25rem;
    }

    /* 评论区移动端优化 */
    .comments-section {
      padding: 0;
    }

    .comment-input-container {
      padding: 1rem;
      border-radius: 0.75rem;
    }

    .user-info {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .nickname-input,
    .add-nickname-btn {
      width: calc(100% - 48px); /* 减去头像宽度和间距 */
      margin-left: 48px; /* 头像宽度加间距 */
    }

    .comment-toolbar {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .emoji-picker {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      max-height: 50vh;
      border-radius: 1rem 1rem 0 0;
      z-index: 1001;
      transform: none;
      overflow-y: auto;
    }

    .emoji-categories {
      position: sticky;
      top: 0;
      background: white;
      padding: 0.5rem;
      z-index: 1;
    }

    .emoji-list {
      grid-template-columns: repeat(6, 1fr);
      max-height: none;
    }

    .comment-item {
      padding: 1rem;
      margin-bottom: 0.75rem;
    }

    .comment-avatar img {
      width: 36px;
      height: 36px;
    }

    .comment-header {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .comment-author {
      font-size: 0.875rem;
    }

    .comment-time {
      font-size: 0.75rem;
      width: 100%;
      padding-left: 0;
    }

    .comment-time::before {
      display: none;
    }

    .comment-actions {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .action-btn {
      font-size: 0.8125rem;
      padding: 0.375rem 0.625rem;
    }

    /* 回复区域移动端优化 */
    .replies-list {
      margin-left: 1rem;
      padding-left: 0.75rem;
      margin-top: 0.75rem;
    }

    .reply-item {
      padding: 0.75rem 0;
    }

    .reply-avatar img {
      width: 28px;
      height: 28px;
    }

    .reply-header {
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    .reply-author {
      font-size: 0.8125rem;
    }

    .reply-time {
      font-size: 0.75rem;
      width: 100%;
    }

    .reply-text {
      font-size: 0.8125rem;
    }

    .reply-input-container {
      margin-left: 1rem;
      padding-left: 0.75rem;
      margin-top: 0.75rem;
    }

    .reply-input-wrapper {
      padding: 0.75rem;
    }

    .reply-input-wrapper textarea {
      min-height: 60px;
    }

    .reply-actions {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .cancel-btn,
    .submit-btn {
      flex: 1;
      padding: 0.5rem;
      font-size: 0.8125rem;
      text-align: center;
    }

    /* 加载更多按钮移动端优化 */
    .load-more {
      margin: 1.5rem 1rem;
    }

    .load-more-btn {
      width: 100%;
      padding: 0.75rem;
      font-size: 0.875rem;
    }

    /* 添加底部安全区域 */
    .api-details {
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }
  }

  /* 深色模式支持 */
  @media (prefers-color-scheme: dark) {
    .api-details {
      background: #1a1b1e;
      color: #e2e8f0;
    }

    .page-header {
      background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
    }

    .comment-input-container,
    .comment-item,
    .reply-input-wrapper {
      background: #2d2d30;
      border-color: #404040;
    }

    .nickname-input,
    textarea {
      background: #1a1b1e;
      border-color: #404040;
      color: #e2e8f0;
    }

    .comment-author,
    .reply-author {
      color: #e2e8f0;
    }

    .comment-text,
    .reply-text {
      color: #cbd5e1;
    }

    .action-btn {
      color: #94a3b8;
    }

    .action-btn:hover {
      background: #374151;
      color: #818cf8;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #450a0a;
    }

    .emoji-picker {
      background: #2d2d30;
      border-color: #404040;
    }

    .category-btn {
      color: #94a3b8;
    }

    .category-btn.active {
      background: #374151;
      color: #818cf8;
    }

    .emoji-btn:hover {
      background: #374151;
    }
  }

  /* 添加平滑滚动 */
  * {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* 优化可点击区域 */
  button,
  .action-btn,
  .emoji-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .copy-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .copy-btn i {
    font-size: 0.875rem;
  }

  .response-example,
  .json-content {
    font-size: 0.8125rem;
    padding: 1rem;
  }

  /* 在线测试样式 */
  .test-content {
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
  }

  .method-select {
    margin-bottom: 1.5rem;
  }

  .method-select select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    transition: all 0.2s;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
  }

  .method-select select:hover {
    border-color: #6366f1;
  }

  .method-select select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  .params-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .param-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    background: #f8fafc;
    padding: 1rem;
    border-radius: 0.5rem;
    position: relative;
    transition: all 0.2s;
  }

  .param-row:hover {
    background: #f1f5f9;
  }

  .param-row input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: white;
    color: #374151;
    transition: all 0.2s;
  }

  .param-row input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  .param-row input::placeholder {
    color: #94a3b8;
  }

  .remove-param {
    padding: 0.75rem;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  .remove-param:hover {
    background: #fecaca;
    transform: scale(1.05);
  }

  .remove-param i {
    font-size: 1rem;
  }

  .add-param-btn {
    padding: 0.75rem;
    border: 2px dashed #e2e8f0;
    background: white;
    color: #6366f1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
  }

  .add-param-btn:hover {
    border-color: #6366f1;
    background: #f8fafc;
    transform: translateY(-1px);
  }

  .add-param-btn i {
    font-size: 1rem;
  }

  .test-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
  }

  .test-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.2) 50%,
      transparent 100%
    );
    transition: all 0.5s;
  }

  .test-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
  }

  .test-btn:hover::before {
    left: 100%;
  }

  .test-btn:disabled {
    background: #e2e8f0;
    cursor: not-allowed;
    transform: none;
  }

  .test-btn i {
    font-size: 1rem;
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .test-content {
      padding: 1rem;
    }

    .param-row {
      grid-template-columns: 1fr;
      gap: 0.5rem;
      padding: 0.75rem;
    }

    .remove-param {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
    }

    .param-row input {
      padding: 0.625rem 0.875rem;
      font-size: 0.8125rem;
    }

    .add-param-btn {
      padding: 0.75rem;
      font-size: 0.875rem;
    }

    .test-btn {
      padding: 0.875rem;
      font-size: 0.875rem;
    }
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .hot-tag {
      top: 0;
      right: 0;
      transform: translateY(-50%);
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
    }

    .hot-tag i {
      font-size: 0.75rem;
    }
  }

  .title-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .hot-tag {
    position: absolute;
    top: -0.5rem;
    right: -3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    border-radius: 1rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
    animation: pulse-hot 2s infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 2;
  }

  .hot-tag::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
    animation: shine 3s infinite;
    transform: rotate(45deg);
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .title-container {
      width: 100%;
    }

    .hot-tag {
      top: 0;
      right: 0;
      transform: translateY(-50%);
      padding: 0.25rem 0.5rem;
      font-size: 0.75rem;
    }

    .api-title {
      padding-right: 4rem; /* 为热门标签预留空间 */
    }
  }

  /* 评论区样式 */
  .comments-section {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
  }

  .comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .comments-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a237e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .comment-count {
    color: #64748b;
    font-size: 0.875rem;
    background: #f8fafc;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
  }

  /* 评论输入框 */
  .comment-input-container {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    margin-bottom: 2rem;
  }

  .comment-input-container.focused {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .add-nickname-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed #e2e8f0;
    color: #6366f1;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
  }

  .add-nickname-btn:hover {
    background: #f8fafc;
    border-color: #6366f1;
  }

  .nickname-input {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    width: 200px;
    background: white;
  }

  .nickname-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  .comment-input-wrapper {
    position: relative;
  }

  textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    resize: vertical;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
  }

  textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

  .comment-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
  }

  .toolbar-left {
    display: flex;
    gap: 0.5rem;
  }

  .toolbar-btn {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .toolbar-btn:hover {
    background: #f1f5f9;
    color: #6366f1;
  }

  .comment-length {
    font-size: 0.75rem;
    color: #94a3b8;
  }

  /* 表情选择器 */
  .emoji-picker {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    width: 350px;
    z-index: 1000;
    border: 1px solid #e2e8f0;
  }

  .emoji-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .emoji-categories::-webkit-scrollbar {
    display: none;
  }

  .category-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .category-btn.active {
    background: #f1f5f9;
    color: #6366f1;
  }

  .emoji-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .emoji-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .emoji-btn:hover {
    background: #f1f5f9;
    transform: scale(1.1);
  }

  /* 评论列表动画 */
  .comment-list-enter-active,
  .comment-list-leave-active {
    transition: all 0.5s ease;
  }

  .comment-list-enter-from,
  .comment-list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  /* 评论项样式 */
  .comment-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .comment-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .action-btn {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .action-btn:hover {
    background: #f1f5f9;
    color: #6366f1;
  }

  .action-btn.liked {
    color: #ef4444;
  }

  .action-btn.liked:hover {
    background: #fef2f2;
  }

  .no-comments {
    text-align: center;
    padding: 3rem 0;
    color: #94a3b8;
  }

  .no-comments i {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .comments-section {
      padding: 0 1rem;
    }

    .comment-input-container {
      padding: 1rem;
    }

    .emoji-picker {
      width: calc(100vw - 2rem);
      left: 50%;
      transform: translateX(-50%);
    }

    .emoji-list {
      grid-template-columns: repeat(6, 1fr);
    }

    .comment-item {
      padding: 1rem;
    }
  }

  .comment-header {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* 增加昵称和时间的间距 */
    margin-bottom: 0.75rem;
  }

  .comment-author {
    font-weight: 600;
    color: #1a237e;
    font-size: 0.95rem;
  }

  .comment-time {
    color: #64748b;
    font-size: 0.85rem;
    position: relative;
    padding-left: 1rem;
  }

  .comment-time::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #cbd5e1;
  }

  /* 表情选择器样式优化 */
  .emoji-picker {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 0;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    width: 350px;
    z-index: 1000;
    border: 1px solid #e2e8f0;
  }

  .emoji-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .emoji-categories::-webkit-scrollbar {
    display: none;
  }

  .category-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    flex-shrink: 0;
  }

  .category-btn.active {
    background: #f1f5f9;
    color: #6366f1;
  }

  .emoji-list {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .emoji-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .emoji-btn:hover {
    background: #f1f5f9;
    transform: scale(1.1);
  }

  /* 评论操作按钮样式优化 */
  .comment-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
  }

  .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .action-btn:hover {
    background: #f1f5f9;
    color: #6366f1;
  }

  .action-btn.liked {
    color: #ef4444;
  }

  .action-btn.liked:hover {
    background: #fef2f2;
  }

  .action-btn i {
    font-size: 1rem;
  }

  /* 加载更多按钮美化 */
  .load-more {
    text-align: center;
    margin: 2rem 0;
  }

  .load-more-btn {
    padding: 0.75rem 2rem;
    background: white;
    border: 2px solid #e2e8f0;
    color: #64748b;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .load-more-btn:hover {
    background: #f8fafc;
    border-color: #6366f1;
    color: #6366f1;
  }

  .load-more-btn:disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
  }

  .load-more-btn i {
    font-size: 1rem;
  }

  @media (max-width: 768px) {
    .emoji-picker {
      width: calc(100vw - 2rem);
      left: 50%;
      transform: translateX(-50%);
    }

    .emoji-list {
      grid-template-columns: repeat(6, 1fr);
    }

    .load-more-btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* 回复列表样式 */
  .replies-list {
    margin-left: 2.5rem;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid #e2e8f0;
  }

  .reply-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
  }

  .reply-item:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
  }

  .reply-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }

  .reply-content {
    flex: 1;
  }

  .reply-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  .reply-author {
    font-weight: 500;
    color: #1a237e;
    font-size: 0.875rem;
  }

  .reply-time {
    color: #64748b;
    font-size: 0.75rem;
  }

  .reply-text {
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
  }

  .reply-to {
    color: #6366f1;
    font-weight: 500;
  }

  /* 回复输入框样式 */
  .reply-input-container {
    margin-top: 1rem;
    margin-left: 2.5rem;
    padding-left: 1rem;
  }

  .reply-input-wrapper {
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .reply-input-wrapper textarea {
    min-height: 80px;
    margin-bottom: 0.5rem;
  }

  .reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .cancel-btn,
  .submit-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .cancel-btn {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
  }

  .cancel-btn:hover {
    background: #f1f5f9;
  }

  .submit-btn {
    background: #6366f1;
    color: white;
    border: none;
  }

  .submit-btn:hover {
    background: #4f46e5;
  }

  .submit-btn:disabled {
    background: #e2e8f0;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    .replies-list {
      margin-left: 1rem;
      padding-left: 0.5rem;
    }

    .reply-input-container {
      margin-left: 1rem;
      padding-left: 0.5rem;
    }
  }

    /* 移动端适配样式 */
    @media (max-width: 768px) {
      .page-header {
        min-height: 300px;
        padding: 2rem 1rem 4rem;
      }

      .api-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
      }

      .api-desc {
        font-size: 1rem;
      }

      .api-meta {
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .meta-item {
        width: calc(50% - 0.375rem);
        justify-content: center;
        font-size: 0.8rem;
      }

      .main-content {
        margin-top: -3rem;
        padding: 0 1rem;
      }

      .content-card {
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .card-header h2 {
        font-size: 1.25rem;
      }

      /* 评论区移动端优化 */
      .comments-section {
        padding: 0;
      }

      .comment-input-container {
        padding: 1rem;
        border-radius: 0.75rem;
      }

      .user-info {
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .nickname-input,
      .add-nickname-btn {
        width: calc(100% - 48px); /* 减去头像宽度和间距 */
        margin-left: 48px; /* 头像宽度加间距 */
      }

      .comment-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .emoji-picker {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 50vh;
        border-radius: 1rem 1rem 0 0;
        z-index: 1001;
        transform: none;
        overflow-y: auto;
      }

      .emoji-categories {
        position: sticky;
        top: 0;
        background: white;
        padding: 0.5rem;
        z-index: 1;
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
        max-height: none;
      }

      .comment-item {
        padding: 1rem;
        margin-bottom: 0.75rem;
      }

      .comment-avatar img {
        width: 36px;
        height: 36px;
      }

      .comment-header {
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .comment-author {
        font-size: 0.875rem;
      }

      .comment-time {
        font-size: 0.75rem;
        width: 100%;
        padding-left: 0;
      }

      .comment-time::before {
        display: none;
      }

      .comment-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .action-btn {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
      }

      /* 回复区域移动端优化 */
      .replies-list {
        margin-left: 1rem;
        padding-left: 0.75rem;
        margin-top: 0.75rem;
      }

      .reply-item {
        padding: 0.75rem 0;
      }

      .reply-avatar img {
        width: 28px;
        height: 28px;
      }

      .reply-header {
        flex-wrap: wrap;
        gap: 0.375rem;
      }

      .reply-author {
        font-size: 0.8125rem;
      }

      .reply-time {
        font-size: 0.75rem;
        width: 100%;
      }

      .reply-text {
        font-size: 0.8125rem;
      }

      .reply-input-container {
        margin-left: 1rem;
        padding-left: 0.75rem;
        margin-top: 0.75rem;
      }

      .reply-input-wrapper {
        padding: 0.75rem;
      }

      .reply-input-wrapper textarea {
        min-height: 60px;
      }

      .reply-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .cancel-btn,
      .submit-btn {
        flex: 1;
        padding: 0.5rem;
        font-size: 0.8125rem;
        text-align: center;
      }

      /* 加载更多按钮移动端优化 */
      .load-more {
        margin: 1.5rem 1rem;
      }

      .load-more-btn {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      /* 添加底部安全区域 */
      .api-details {
        padding-bottom: env(safe-area-inset-bottom, 20px);
      }
    }

    /* 深色模式支持 */
    @media (prefers-color-scheme: dark) {
      .api-details {
        background: #1a1b1e;
        color: #e2e8f0;
      }

      .page-header {
        background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
      }

      .comment-input-container,
      .comment-item,
      .reply-input-wrapper {
        background: #2d2d30;
        border-color: #404040;
      }

      .nickname-input,
      textarea {
        background: #1a1b1e;
        border-color: #404040;
        color: #e2e8f0;
      }

      .comment-author,
      .reply-author {
        color: #e2e8f0;
      }

      .comment-text,
      .reply-text {
        color: #cbd5e1;
      }

      .action-btn {
        color: #94a3b8;
      }

      .action-btn:hover {
        background: #374151;
        color: #818cf8;
      }

      .action-btn.liked {
        color: #ef4444;
      }

      .action-btn.liked:hover {
        background: #450a0a;
      }

      .emoji-picker {
        background: #2d2d30;
        border-color: #404040;
      }

      .category-btn {
        color: #94a3b8;
      }

      .category-btn.active {
        background: #374151;
        color: #818cf8;
      }

      .emoji-btn:hover {
        background: #374151;
      }
    }

    /* 添加平滑滚动 */
    * {
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    /* 优化可点击区域 */
    button,
    .action-btn,
    .emoji-btn {
      min-height: 44px;
      min-width: 44px;
    }

    .copy-btn {
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
    }

    .copy-btn i {
      font-size: 0.875rem;
    }

    .response-example,
    .json-content {
      font-size: 0.8125rem;
      padding: 1rem;
    }

    /* 在线测试样式 */
    .test-content {
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
    }

    .method-select {
      margin-bottom: 1.5rem;
    }

    .method-select select {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      background: white;
      color: #374151;
      font-size: 0.875rem;
      transition: all 0.2s;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1em;
    }

    .method-select select:hover {
      border-color: #6366f1;
    }

    .method-select select:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .params-editor {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .param-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 0.75rem;
      align-items: center;
      background: #f8fafc;
      padding: 1rem;
      border-radius: 0.5rem;
      position: relative;
      transition: all 0.2s;
    }

    .param-row:hover {
      background: #f1f5f9;
    }

    .param-row input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      background: white;
      color: #374151;
      transition: all 0.2s;
    }

    .param-row input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .param-row input::placeholder {
      color: #94a3b8;
    }

    .remove-param {
      padding: 0.75rem;
      border: none;
      background: #fee2e2;
      color: #dc2626;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    .remove-param:hover {
      background: #fecaca;
      transform: scale(1.05);
    }

    .remove-param i {
      font-size: 1rem;
    }

    .add-param-btn {
      padding: 0.75rem;
      border: 2px dashed #e2e8f0;
      background: white;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 500;
    }

    .add-param-btn:hover {
      border-color: #6366f1;
      background: #f8fafc;
      transform: translateY(-1px);
    }

    .add-param-btn i {
      font-size: 1rem;
    }

    .test-btn {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      overflow: hidden;
    }

    .test-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      );
      transition: all 0.5s;
    }

    .test-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
    }

    .test-btn:hover::before {
      left: 100%;
    }

    .test-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
      transform: none;
    }

    .test-btn i {
      font-size: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .test-content {
        padding: 1rem;
      }

      .param-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
      }

      .remove-param {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
      }

      .param-row input {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
      }

      .add-param-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      .test-btn {
        padding: 0.875rem;
        font-size: 0.875rem;
      }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .hot-tag i {
        font-size: 0.75rem;
      }
    }

    .title-container {
      position: relative;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .title-container {
        width: 100%;
      }

      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .api-title {
        padding-right: 4rem; /* 为热门标签预留空间 */
      }
    }

    /* 评论区样式 */
    .comments-section {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .comments-header h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1a237e;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .comment-count {
      color: #64748b;
      font-size: 0.875rem;
      background: #f8fafc;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
    }

    /* 评论输入框 */
    .comment-input-container {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      margin-bottom: 2rem;
    }

    .comment-input-container.focused {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .add-nickname-btn {
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px dashed #e2e8f0;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
    }

    .add-nickname-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
    }

    .nickname-input {
      padding: 0.5rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      width: 200px;
      background: white;
    }

    .nickname-input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-input-wrapper {
      position: relative;
    }

    textarea {
      width: 100%;
      min-height: 100px;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      resize: vertical;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      margin-bottom: 0.5rem;
    }

    textarea:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
    }

    .toolbar-left {
      display: flex;
      gap: 0.5rem;
    }

    .toolbar-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toolbar-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .comment-length {
      font-size: 0.75rem;
      color: #94a3b8;
    }

    /* 表情选择器 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论列表动画 */
    .comment-list-enter-active,
    .comment-list-leave-active {
      transition: all 0.5s ease;
    }

    .comment-list-enter-from,
    .comment-list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    /* 评论项样式 */
    .comment-item {
      display: flex;
      gap: 1rem;
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .comment-item:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .action-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .no-comments {
      text-align: center;
      padding: 3rem 0;
      color: #94a3b8;
    }

    .no-comments i {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .comments-section {
        padding: 0 1rem;
      }

      .comment-input-container {
        padding: 1rem;
      }

      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .comment-item {
        padding: 1rem;
      }
    }

    .comment-header {
      display: flex;
      align-items: center;
      gap: 1.5rem; /* 增加昵称和时间的间距 */
      margin-bottom: 0.75rem;
    }

    .comment-author {
      font-weight: 600;
      color: #1a237e;
      font-size: 0.95rem;
    }

    .comment-time {
      color: #64748b;
      font-size: 0.85rem;
      position: relative;
      padding-left: 1rem;
    }

    .comment-time::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #cbd5e1;
    }

    /* 表情选择器样式优化 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论操作按钮样式优化 */
    .comment-actions {
      display: flex;
      gap: 1rem;
      margin-top: 0.75rem;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.875rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .action-btn i {
      font-size: 1rem;
    }

    /* 加载更多按钮美化 */
    .load-more {
      text-align: center;
      margin: 2rem 0;
    }

    .load-more-btn {
      padding: 0.75rem 2rem;
      background: white;
      border: 2px solid #e2e8f0;
      color: #64748b;
      font-weight: 500;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .load-more-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
      color: #6366f1;
    }

    .load-more-btn:disabled {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      cursor: not-allowed;
    }

    .load-more-btn i {
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .load-more-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* 回复列表样式 */
    .replies-list {
      margin-left: 2.5rem;
      margin-top: 1rem;
      padding-left: 1rem;
      border-left: 2px solid #e2e8f0;
    }

    .reply-item {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
    }

    .reply-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .reply-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .reply-content {
      flex: 1;
    }

    .reply-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .reply-author {
      font-weight: 500;
      color: #1a237e;
      font-size: 0.875rem;
    }

    .reply-time {
      color: #64748b;
      font-size: 0.75rem;
    }

    .reply-text {
      color: #334155;
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }

    .reply-to {
      color: #6366f1;
      font-weight: 500;
    }

    /* 回复输入框样式 */
    .reply-input-container {
      margin-top: 1rem;
      margin-left: 2.5rem;
      padding-left: 1rem;
    }

    .reply-input-wrapper {
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .reply-input-wrapper textarea {
      min-height: 80px;
      margin-bottom: 0.5rem;
    }

    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }

    .cancel-btn,
    .submit-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cancel-btn {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .cancel-btn:hover {
      background: #f1f5f9;
    }

    .submit-btn {
      background: #6366f1;
      color: white;
      border: none;
    }

    .submit-btn:hover {
      background: #4f46e5;
    }

    .submit-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .replies-list {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }

      .reply-input-container {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }
    }

      /* 移动端适配样式 */
      @media (max-width: 768px) {
        .page-header {
          min-height: 300px;
          padding: 2rem 1rem 4rem;
        }

        .api-title {
          font-size: 1.75rem;
          margin-bottom: 0.75rem;
        }

        .api-desc {
          font-size: 1rem;
        }

        .api-meta {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .meta-item {
          width: calc(50% - 0.375rem);
          justify-content: center;
          font-size: 0.8rem;
        }

        .main-content {
          margin-top: -3rem;
          padding: 0 1rem;
        }

        .content-card {
          padding: 1rem;
          margin-bottom: 1rem;
        }

        .card-header h2 {
          font-size: 1.25rem;
        }

        /* 评论区移动端优化 */
        .comments-section {
          padding: 0;
        }

        .comment-input-container {
          padding: 1rem;
          border-radius: 0.75rem;
        }

        .user-info {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .nickname-input,
        .add-nickname-btn {
          width: calc(100% - 48px); /* 减去头像宽度和间距 */
          margin-left: 48px; /* 头像宽度加间距 */
        }

        .comment-toolbar {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .emoji-picker {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          max-height: 50vh;
          border-radius: 1rem 1rem 0 0;
          z-index: 1001;
          transform: none;
          overflow-y: auto;
        }

        .emoji-categories {
          position: sticky;
          top: 0;
          background: white;
          padding: 0.5rem;
          z-index: 1;
        }

        .emoji-list {
          grid-template-columns: repeat(6, 1fr);
          max-height: none;
        }

        .comment-item {
          padding: 1rem;
          margin-bottom: 0.75rem;
        }

        .comment-avatar img {
          width: 36px;
          height: 36px;
        }

        .comment-header {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .comment-author {
          font-size: 0.875rem;
        }

        .comment-time {
          font-size: 0.75rem;
          width: 100%;
          padding-left: 0;
        }

        .comment-time::before {
          display: none;
        }

        .comment-actions {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .action-btn {
          font-size: 0.8125rem;
          padding: 0.375rem 0.625rem;
        }

        /* 回复区域移动端优化 */
        .replies-list {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-item {
          padding: 0.75rem 0;
        }

        .reply-avatar img {
          width: 28px;
          height: 28px;
        }

        .reply-header {
          flex-wrap: wrap;
          gap: 0.375rem;
        }

        .reply-author {
          font-size: 0.8125rem;
        }

        .reply-time {
          font-size: 0.75rem;
          width: 100%;
        }

        .reply-text {
          font-size: 0.8125rem;
        }

        .reply-input-container {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-input-wrapper {
          padding: 0.75rem;
        }

        .reply-input-wrapper textarea {
          min-height: 60px;
        }

        .reply-actions {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .cancel-btn,
        .submit-btn {
          flex: 1;
          padding: 0.5rem;
          font-size: 0.8125rem;
          text-align: center;
        }

        /* 加载更多按钮移动端优化 */
        .load-more {
          margin: 1.5rem 1rem;
        }

        .load-more-btn {
          width: 100%;
          padding: 0.75rem;
          font-size: 0.875rem;
        }

        /* 添加底部安全区域 */
        .api-details {
          padding-bottom: env(safe-area-inset-bottom, 20px);
        }
      }

      /* 深色模式支持 */
      @media (prefers-color-scheme: dark) {
        .api-details {
          background: #1a1b1e;
          color: #e2e8f0;
        }

        .page-header {
          background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
        }

        .comment-input-container,
        .comment-item,
        .reply-input-wrapper {
          background: #2d2d30;
          border-color: #404040;
        }

        .nickname-input,
        textarea {
          background: #1a1b1e;
          border-color: #404040;
          color: #e2e8f0;
        }

        .comment-author,
        .reply-author {
          color: #e2e8f0;
        }

        .comment-text,
        .reply-text {
          color: #cbd5e1;
        }

        .action-btn {
          color: #94a3b8;
        }

        .action-btn:hover {
          background: #374151;
          color: #818cf8;
        }

        .action-btn.liked {
          color: #ef4444;
        }

        .action-btn.liked:hover {
          background: #450a0a;
        }

        .emoji-picker {
          background: #2d2d30;
          border-color: #404040;
        }

        .category-btn {
          color: #94a3b8;
        }

        .category-btn.active {
          background: #374151;
          color: #818cf8;
        }

        .emoji-btn:hover {
          background: #374151;
        }
      }

      /* 添加平滑滚动 */
      * {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      /* 优化可点击区域 */
      button,
      .action-btn,
      .emoji-btn {
        min-height: 44px;
        min-width: 44px;
      }

      .copy-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }

      .copy-btn i {
        font-size: 0.875rem;
      }

      .response-example,
      .json-content {
        font-size: 0.8125rem;
        padding: 1rem;
      }
    

    /* 在线测试样式 */
    .test-content {
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
    }

    .method-select {
      margin-bottom: 1.5rem;
    }

    .method-select select {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      background: white;
      color: #374151;
      font-size: 0.875rem;
      transition: all 0.2s;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1em;
    }

    .method-select select:hover {
      border-color: #6366f1;
    }

    .method-select select:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .params-editor {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .param-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 0.75rem;
      align-items: center;
      background: #f8fafc;
      padding: 1rem;
      border-radius: 0.5rem;
      position: relative;
      transition: all 0.2s;
    }

    .param-row:hover {
      background: #f1f5f9;
    }

    .param-row input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      background: white;
      color: #374151;
      transition: all 0.2s;
    }

    .param-row input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .param-row input::placeholder {
      color: #94a3b8;
    }

    .remove-param {
      padding: 0.75rem;
      border: none;
      background: #fee2e2;
      color: #dc2626;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    .remove-param:hover {
      background: #fecaca;
      transform: scale(1.05);
    }

    .remove-param i {
      font-size: 1rem;
    }

    .add-param-btn {
      padding: 0.75rem;
      border: 2px dashed #e2e8f0;
      background: white;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 500;
    }

    .add-param-btn:hover {
      border-color: #6366f1;
      background: #f8fafc;
      transform: translateY(-1px);
    }

    .add-param-btn i {
      font-size: 1rem;
    }

    .test-btn {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      overflow: hidden;
    }

    .test-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      );
      transition: all 0.5s;
    }

    .test-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
    }

    .test-btn:hover::before {
      left: 100%;
    }

    .test-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
      transform: none;
    }

    .test-btn i {
      font-size: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .test-content {
        padding: 1rem;
      }

      .param-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
      }

      .remove-param {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
      }

      .param-row input {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
      }

      .add-param-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      .test-btn {
        padding: 0.875rem;
        font-size: 0.875rem;
      }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .hot-tag i {
        font-size: 0.75rem;
      }
    }

    .title-container {
      position: relative;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .title-container {
        width: 100%;
      }

      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .api-title {
        padding-right: 4rem; /* 为热门标签预留空间 */
      }
    }

    /* 评论区样式 */
    .comments-section {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .comments-header h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1a237e;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .comment-count {
      color: #64748b;
      font-size: 0.875rem;
      background: #f8fafc;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
    }

    /* 评论输入框 */
    .comment-input-container {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      margin-bottom: 2rem;
    }

    .comment-input-container.focused {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .add-nickname-btn {
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px dashed #e2e8f0;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
    }

    .add-nickname-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
    }

    .nickname-input {
      padding: 0.5rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      width: 200px;
      background: white;
    }

    .nickname-input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-input-wrapper {
      position: relative;
    }

    textarea {
      width: 100%;
      min-height: 100px;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      resize: vertical;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      margin-bottom: 0.5rem;
    }

    textarea:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
    }

    .toolbar-left {
      display: flex;
      gap: 0.5rem;
    }

    .toolbar-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toolbar-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .comment-length {
      font-size: 0.75rem;
      color: #94a3b8;
    }

    /* 表情选择器 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论列表动画 */
    .comment-list-enter-active,
    .comment-list-leave-active {
      transition: all 0.5s ease;
    }

    .comment-list-enter-from,
    .comment-list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    /* 评论项样式 */
    .comment-item {
      display: flex;
      gap: 1rem;
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .comment-item:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .action-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .no-comments {
      text-align: center;
      padding: 3rem 0;
      color: #94a3b8;
    }

    .no-comments i {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .comments-section {
        padding: 0 1rem;
      }

      .comment-input-container {
        padding: 1rem;
      }

      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .comment-item {
        padding: 1rem;
      }
    }

    .comment-header {
      display: flex;
      align-items: center;
      gap: 1.5rem; /* 增加昵称和时间的间距 */
      margin-bottom: 0.75rem;
    }

    .comment-author {
      font-weight: 600;
      color: #1a237e;
      font-size: 0.95rem;
    }

    .comment-time {
      color: #64748b;
      font-size: 0.85rem;
      position: relative;
      padding-left: 1rem;
    }

    .comment-time::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #cbd5e1;
    }

    /* 表情选择器样式优化 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论操作按钮样式优化 */
    .comment-actions {
      display: flex;
      gap: 1rem;
      margin-top: 0.75rem;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.875rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .action-btn i {
      font-size: 1rem;
    }

    /* 加载更多按钮美化 */
    .load-more {
      text-align: center;
      margin: 2rem 0;
    }

    .load-more-btn {
      padding: 0.75rem 2rem;
      background: white;
      border: 2px solid #e2e8f0;
      color: #64748b;
      font-weight: 500;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .load-more-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
      color: #6366f1;
    }

    .load-more-btn:disabled {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      cursor: not-allowed;
    }

    .load-more-btn i {
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .load-more-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* 回复列表样式 */
    .replies-list {
      margin-left: 2.5rem;
      margin-top: 1rem;
      padding-left: 1rem;
      border-left: 2px solid #e2e8f0;
    }

    .reply-item {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
    }

    .reply-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .reply-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .reply-content {
      flex: 1;
    }

    .reply-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .reply-author {
      font-weight: 500;
      color: #1a237e;
      font-size: 0.875rem;
    }

    .reply-time {
      color: #64748b;
      font-size: 0.75rem;
    }

    .reply-text {
      color: #334155;
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }

    .reply-to {
      color: #6366f1;
      font-weight: 500;
    }

    /* 回复输入框样式 */
    .reply-input-container {
      margin-top: 1rem;
      margin-left: 2.5rem;
      padding-left: 1rem;
    }

    .reply-input-wrapper {
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .reply-input-wrapper textarea {
      min-height: 80px;
      margin-bottom: 0.5rem;
    }

    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }

    .cancel-btn,
    .submit-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cancel-btn {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .cancel-btn:hover {
      background: #f1f5f9;
    }

    .submit-btn {
      background: #6366f1;
      color: white;
      border: none;
    }

    .submit-btn:hover {
      background: #4f46e5;
    }

    .submit-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .replies-list {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }

      .reply-input-container {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }
    }

      /* 移动端适配样式 */
      @media (max-width: 768px) {
        .page-header {
          min-height: 300px;
          padding: 2rem 1rem 4rem;
        }

        .api-title {
          font-size: 1.75rem;
          margin-bottom: 0.75rem;
        }

        .api-desc {
          font-size: 1rem;
        }

        .api-meta {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .meta-item {
          width: calc(50% - 0.375rem);
          justify-content: center;
          font-size: 0.8rem;
        }

        .main-content {
          margin-top: -3rem;
          padding: 0 1rem;
        }

        .content-card {
          padding: 1rem;
          margin-bottom: 1rem;
        }

        .card-header h2 {
          font-size: 1.25rem;
        }

        /* 评论区移动端优化 */
        .comments-section {
          padding: 0;
        }

        .comment-input-container {
          padding: 1rem;
          border-radius: 0.75rem;
        }

        .user-info {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .nickname-input,
        .add-nickname-btn {
          width: calc(100% - 48px); /* 减去头像宽度和间距 */
          margin-left: 48px; /* 头像宽度加间距 */
        }

        .comment-toolbar {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .emoji-picker {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          max-height: 50vh;
          border-radius: 1rem 1rem 0 0;
          z-index: 1001;
          transform: none;
          overflow-y: auto;
        }

        .emoji-categories {
          position: sticky;
          top: 0;
          background: white;
          padding: 0.5rem;
          z-index: 1;
        }

        .emoji-list {
          grid-template-columns: repeat(6, 1fr);
          max-height: none;
        }

        .comment-item {
          padding: 1rem;
          margin-bottom: 0.75rem;
        }

        .comment-avatar img {
          width: 36px;
          height: 36px;
        }

        .comment-header {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .comment-author {
          font-size: 0.875rem;
        }

        .comment-time {
          font-size: 0.75rem;
          width: 100%;
          padding-left: 0;
        }

        .comment-time::before {
          display: none;
        }

        .comment-actions {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .action-btn {
          font-size: 0.8125rem;
          padding: 0.375rem 0.625rem;
        }

        /* 回复区域移动端优化 */
        .replies-list {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-item {
          padding: 0.75rem 0;
        }

        .reply-avatar img {
          width: 28px;
          height: 28px;
        }

        .reply-header {
          flex-wrap: wrap;
          gap: 0.375rem;
        }

        .reply-author {
          font-size: 0.8125rem;
        }

        .reply-time {
          font-size: 0.75rem;
          width: 100%;
        }

        .reply-text {
          font-size: 0.8125rem;
        }

        .reply-input-container {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-input-wrapper {
          padding: 0.75rem;
        }

        .reply-input-wrapper textarea {
          min-height: 60px;
        }

        .reply-actions {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .cancel-btn,
        .submit-btn {
          flex: 1;
          padding: 0.5rem;
          font-size: 0.8125rem;
          text-align: center;
        }

        /* 加载更多按钮移动端优化 */
        .load-more {
          margin: 1.5rem 1rem;
        }

        .load-more-btn {
          width: 100%;
          padding: 0.75rem;
          font-size: 0.875rem;
        }

        /* 添加底部安全区域 */
        .api-details {
          padding-bottom: env(safe-area-inset-bottom, 20px);
        }
      }

      /* 深色模式支持 */
      @media (prefers-color-scheme: dark) {
        .api-details {
          background: #1a1b1e;
          color: #e2e8f0;
        }

        .page-header {
          background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
        }

        .comment-input-container,
        .comment-item,
        .reply-input-wrapper {
          background: #2d2d30;
          border-color: #404040;
        }

        .nickname-input,
        textarea {
          background: #1a1b1e;
          border-color: #404040;
          color: #e2e8f0;
        }

        .comment-author,
        .reply-author {
          color: #e2e8f0;
        }

        .comment-text,
        .reply-text {
          color: #cbd5e1;
        }

        .action-btn {
          color: #94a3b8;
        }

        .action-btn:hover {
          background: #374151;
          color: #818cf8;
        }

        .action-btn.liked {
          color: #ef4444;
        }

        .action-btn.liked:hover {
          background: #450a0a;
        }

        .emoji-picker {
          background: #2d2d30;
          border-color: #404040;
        }

        .category-btn {
          color: #94a3b8;
        }

        .category-btn.active {
          background: #374151;
          color: #818cf8;
        }

        .emoji-btn:hover {
          background: #374151;
        }
      }

      /* 添加平滑滚动 */
      * {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      /* 优化可点击区域 */
      button,
      .action-btn,
      .emoji-btn {
        min-height: 44px;
        min-width: 44px;
      }

      .copy-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }

      .copy-btn i {
        font-size: 0.875rem;
      }

      .response-example,
      .json-content {
        font-size: 0.8125rem;
        padding: 1rem;
      }
    
    /* 全局滚动条样式 */
    ::-webkit-scrollbar {
      width: 4px;
      height: 0;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }

    /* 热门标签样式 */
    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    .hot-tag i {
      font-size: 0.875rem;
      animation: flicker 1.5s infinite;
    }

    @keyframes pulse-hot {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes shine {
      0% {
        left: -50%;
      }
      100% {
        left: 100%;
      }
    }

    @keyframes flicker {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .hot-tag i {
        font-size: 0.75rem;
      }
    }

    .title-container {
      position: relative;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .title-container {
        width: 100%;
      }

      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .api-title {
        padding-right: 4rem; /* 为热门标签预留空间 */
      }
    }

    /* 评论区样式 */
    .comments-section {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .comments-header h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1a237e;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .comment-count {
      color: #64748b;
      font-size: 0.875rem;
      background: #f8fafc;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
    }

    /* 评论输入框 */
    .comment-input-container {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      margin-bottom: 2rem;
    }

    .comment-input-container.focused {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .add-nickname-btn {
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px dashed #e2e8f0;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
    }

    .add-nickname-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
    }

    .nickname-input {
      padding: 0.5rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      width: 200px;
      background: white;
    }

    .nickname-input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-input-wrapper {
      position: relative;
    }

    textarea {
      width: 100%;
      min-height: 100px;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      resize: vertical;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      margin-bottom: 0.5rem;
    }

    textarea:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
    }

    .toolbar-left {
      display: flex;
      gap: 0.5rem;
    }

    .toolbar-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toolbar-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .comment-length {
      font-size: 0.75rem;
      color: #94a3b8;
    }

    /* 表情选择器 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论列表动画 */
    .comment-list-enter-active,
    .comment-list-leave-active {
      transition: all 0.5s ease;
    }

    .comment-list-enter-from,
    .comment-list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    /* 评论项样式 */
    .comment-item {
      display: flex;
      gap: 1rem;
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .comment-item:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .action-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .no-comments {
      text-align: center;
      padding: 3rem 0;
      color: #94a3b8;
    }

    .no-comments i {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .comments-section {
        padding: 0 1rem;
      }

      .comment-input-container {
        padding: 1rem;
      }

      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .comment-item {
        padding: 1rem;
      }
    }

    .comment-header {
      display: flex;
      align-items: center;
      gap: 1.5rem; /* 增加昵称和时间的间距 */
      margin-bottom: 0.75rem;
    }

    .comment-author {
      font-weight: 600;
      color: #1a237e;
      font-size: 0.95rem;
    }

    .comment-time {
      color: #64748b;
      font-size: 0.85rem;
      position: relative;
      padding-left: 1rem;
    }

    .comment-time::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #cbd5e1;
    }

    /* 表情选择器样式优化 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论操作按钮样式优化 */
    .comment-actions {
      display: flex;
      gap: 1rem;
      margin-top: 0.75rem;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.875rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .action-btn i {
      font-size: 1rem;
    }

    /* 加载更多按钮美化 */
    .load-more {
      text-align: center;
      margin: 2rem 0;
    }

    .load-more-btn {
      padding: 0.75rem 2rem;
      background: white;
      border: 2px solid #e2e8f0;
      color: #64748b;
      font-weight: 500;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .load-more-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
      color: #6366f1;
    }

    .load-more-btn:disabled {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      cursor: not-allowed;
    }

    .load-more-btn i {
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .load-more-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* 回复列表样式 */
    .replies-list {
      margin-left: 2.5rem;
      margin-top: 1rem;
      padding-left: 1rem;
      border-left: 2px solid #e2e8f0;
    }

    .reply-item {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
    }

    .reply-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .reply-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .reply-content {
      flex: 1;
    }

    .reply-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .reply-author {
      font-weight: 500;
      color: #1a237e;
      font-size: 0.875rem;
    }

    .reply-time {
      color: #64748b;
      font-size: 0.75rem;
    }

    .reply-text {
      color: #334155;
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }

    .reply-to {
      color: #6366f1;
      font-weight: 500;
    }

    /* 回复输入框样式 */
    .reply-input-container {
      margin-top: 1rem;
      margin-left: 2.5rem;
      padding-left: 1rem;
    }

    .reply-input-wrapper {
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .reply-input-wrapper textarea {
      min-height: 80px;
      margin-bottom: 0.5rem;
    }

    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }

    .cancel-btn,
    .submit-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cancel-btn {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .cancel-btn:hover {
      background: #f1f5f9;
    }

    .submit-btn {
      background: #6366f1;
      color: white;
      border: none;
    }

    .submit-btn:hover {
      background: #4f46e5;
    }

    .submit-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .replies-list {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }

      .reply-input-container {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }
    }

      /* 移动端适配样式 */
      @media (max-width: 768px) {
        .page-header {
          min-height: 300px;
          padding: 2rem 1rem 4rem;
        }

        .api-title {
          font-size: 1.75rem;
          margin-bottom: 0.75rem;
        }

        .api-desc {
          font-size: 1rem;
        }

        .api-meta {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .meta-item {
          width: calc(50% - 0.375rem);
          justify-content: center;
          font-size: 0.8rem;
        }

        .main-content {
          margin-top: -3rem;
          padding: 0 1rem;
        }

        .content-card {
          padding: 1rem;
          margin-bottom: 1rem;
        }

        .card-header h2 {
          font-size: 1.25rem;
        }

        /* 评论区移动端优化 */
        .comments-section {
          padding: 0;
        }

        .comment-input-container {
          padding: 1rem;
          border-radius: 0.75rem;
        }

        .user-info {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .nickname-input,
        .add-nickname-btn {
          width: calc(100% - 48px); /* 减去头像宽度和间距 */
          margin-left: 48px; /* 头像宽度加间距 */
        }

        .comment-toolbar {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .emoji-picker {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          max-height: 50vh;
          border-radius: 1rem 1rem 0 0;
          z-index: 1001;
          transform: none;
          overflow-y: auto;
        }

        .emoji-categories {
          position: sticky;
          top: 0;
          background: white;
          padding: 0.5rem;
          z-index: 1;
        }

        .emoji-list {
          grid-template-columns: repeat(6, 1fr);
          max-height: none;
        }

        .comment-item {
          padding: 1rem;
          margin-bottom: 0.75rem;
        }

        .comment-avatar img {
          width: 36px;
          height: 36px;
        }

        .comment-header {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .comment-author {
          font-size: 0.875rem;
        }

        .comment-time {
          font-size: 0.75rem;
          width: 100%;
          padding-left: 0;
        }

        .comment-time::before {
          display: none;
        }

        .comment-actions {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .action-btn {
          font-size: 0.8125rem;
          padding: 0.375rem 0.625rem;
        }

        /* 回复区域移动端优化 */
        .replies-list {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-item {
          padding: 0.75rem 0;
        }

        .reply-avatar img {
          width: 28px;
          height: 28px;
        }

        .reply-header {
          flex-wrap: wrap;
          gap: 0.375rem;
        }

        .reply-author {
          font-size: 0.8125rem;
        }

        .reply-time {
          font-size: 0.75rem;
          width: 100%;
        }

        .reply-text {
          font-size: 0.8125rem;
        }

        .reply-input-container {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-input-wrapper {
          padding: 0.75rem;
        }

        .reply-input-wrapper textarea {
          min-height: 60px;
        }

        .reply-actions {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .cancel-btn,
        .submit-btn {
          flex: 1;
          padding: 0.5rem;
          font-size: 0.8125rem;
          text-align: center;
        }

        /* 加载更多按钮移动端优化 */
        .load-more {
          margin: 1.5rem 1rem;
        }

        .load-more-btn {
          width: 100%;
          padding: 0.75rem;
          font-size: 0.875rem;
        }

        /* 添加底部安全区域 */
        .api-details {
          padding-bottom: env(safe-area-inset-bottom, 20px);
        }
      }

      /* 深色模式支持 */
      @media (prefers-color-scheme: dark) {
        .api-details {
          background: #1a1b1e;
          color: #e2e8f0;
        }

        .page-header {
          background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
        }

        .comment-input-container,
        .comment-item,
        .reply-input-wrapper {
          background: #2d2d30;
          border-color: #404040;
        }

        .nickname-input,
        textarea {
          background: #1a1b1e;
          border-color: #404040;
          color: #e2e8f0;
        }

        .comment-author,
        .reply-author {
          color: #e2e8f0;
        }

        .comment-text,
        .reply-text {
          color: #cbd5e1;
        }

        .action-btn {
          color: #94a3b8;
        }

        .action-btn:hover {
          background: #374151;
          color: #818cf8;
        }

        .action-btn.liked {
          color: #ef4444;
        }

        .action-btn.liked:hover {
          background: #450a0a;
        }

        .emoji-picker {
          background: #2d2d30;
          border-color: #404040;
        }

        .category-btn {
          color: #94a3b8;
        }

        .category-btn.active {
          background: #374151;
          color: #818cf8;
        }

        .emoji-btn:hover {
          background: #374151;
        }
      }

      /* 添加平滑滚动 */
      * {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      /* 优化可点击区域 */
      button,
      .action-btn,
      .emoji-btn {
        min-height: 44px;
        min-width: 44px;
      }

      .copy-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }

      .copy-btn i {
        font-size: 0.875rem;
      }

      .response-example,
      .json-content {
        font-size: 0.8125rem;
        padding: 1rem;
      }
    

    /* 全局滚动条样式 */
    ::-webkit-scrollbar {
      width: 4px;
      height: 0;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }

    /* 热门标签样式 */
    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    .hot-tag i {
      font-size: 0.875rem;
      animation: flicker 1.5s infinite;
    }

    @keyframes pulse-hot {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes shine {
      0% {
        left: -50%;
      }
      100% {
        left: 100%;
      }
    }

    @keyframes flicker {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.8;
      }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .hot-tag i {
        font-size: 0.75rem;
      }
    }

    .title-container {
      position: relative;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .hot-tag {
      position: absolute;
      top: -0.5rem;
      right: -3rem;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.25rem 0.75rem;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      border-radius: 1rem;
      color: white;
      font-size: 0.875rem;
      font-weight: 500;
      box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
      animation: pulse-hot 2s infinite;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      white-space: nowrap;
      z-index: 2;
    }

    .hot-tag::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
      );
      animation: shine 3s infinite;
      transform: rotate(45deg);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .title-container {
        width: 100%;
      }

      .hot-tag {
        top: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
      }

      .api-title {
        padding-right: 4rem; /* 为热门标签预留空间 */
      }
    }

    /* 评论区样式 */
    .comments-section {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .comments-header h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1a237e;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .comment-count {
      color: #64748b;
      font-size: 0.875rem;
      background: #f8fafc;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
    }

    /* 评论输入框 */
    .comment-input-container {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      margin-bottom: 2rem;
    }

    .comment-input-container.focused {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .add-nickname-btn {
      padding: 0.5rem 1rem;
      background: transparent;
      border: 1px dashed #e2e8f0;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 0.875rem;
      transition: all 0.2s;
    }

    .add-nickname-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
    }

    .nickname-input {
      padding: 0.5rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      width: 200px;
      background: white;
    }

    .nickname-input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-input-wrapper {
      position: relative;
    }

    textarea {
      width: 100%;
      min-height: 100px;
      padding: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      resize: vertical;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      margin-bottom: 0.5rem;
    }

    textarea:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .comment-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
    }

    .toolbar-left {
      display: flex;
      gap: 0.5rem;
    }

    .toolbar-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .toolbar-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .comment-length {
      font-size: 0.75rem;
      color: #94a3b8;
    }

    /* 表情选择器 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论列表动画 */
    .comment-list-enter-active,
    .comment-list-leave-active {
      transition: all 0.5s ease;
    }

    .comment-list-enter-from,
    .comment-list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    /* 评论项样式 */
    .comment-item {
      display: flex;
      gap: 1rem;
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .comment-item:hover {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .action-btn {
      background: transparent;
      border: none;
      color: #64748b;
      padding: 0.5rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .no-comments {
      text-align: center;
      padding: 3rem 0;
      color: #94a3b8;
    }

    .no-comments i {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .comments-section {
        padding: 0 1rem;
      }

      .comment-input-container {
        padding: 1rem;
      }

      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .comment-item {
        padding: 1rem;
      }
    }

    .comment-header {
      display: flex;
      align-items: center;
      gap: 1.5rem; /* 增加昵称和时间的间距 */
      margin-bottom: 0.75rem;
    }

    .comment-author {
      font-weight: 600;
      color: #1a237e;
      font-size: 0.95rem;
    }

    .comment-time {
      color: #64748b;
      font-size: 0.85rem;
      position: relative;
      padding-left: 1rem;
    }

    .comment-time::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #cbd5e1;
    }

    /* 表情选择器样式优化 */
    .emoji-picker {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 0;
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 1rem;
      width: 350px;
      z-index: 1000;
      border: 1px solid #e2e8f0;
    }

    .emoji-categories {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .emoji-categories::-webkit-scrollbar {
      display: none;
    }

    .category-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s;
      flex-shrink: 0;
    }

    .category-btn.active {
      background: #f1f5f9;
      color: #6366f1;
    }

    .emoji-list {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
      padding: 0.5rem;
    }

    .emoji-btn {
      background: transparent;
      border: none;
      padding: 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emoji-btn:hover {
      background: #f1f5f9;
      transform: scale(1.1);
    }

    /* 评论操作按钮样式优化 */
    .comment-actions {
      display: flex;
      gap: 1rem;
      margin-top: 0.75rem;
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 0.875rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-btn:hover {
      background: #f1f5f9;
      color: #6366f1;
    }

    .action-btn.liked {
      color: #ef4444;
    }

    .action-btn.liked:hover {
      background: #fef2f2;
    }

    .action-btn i {
      font-size: 1rem;
    }

    /* 加载更多按钮美化 */
    .load-more {
      text-align: center;
      margin: 2rem 0;
    }

    .load-more-btn {
      padding: 0.75rem 2rem;
      background: white;
      border: 2px solid #e2e8f0;
      color: #64748b;
      font-weight: 500;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .load-more-btn:hover {
      background: #f8fafc;
      border-color: #6366f1;
      color: #6366f1;
    }

    .load-more-btn:disabled {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      cursor: not-allowed;
    }

    .load-more-btn i {
      font-size: 1rem;
    }

    @media (max-width: 768px) {
      .emoji-picker {
        width: calc(100vw - 2rem);
        left: 50%;
        transform: translateX(-50%);
      }

      .emoji-list {
        grid-template-columns: repeat(6, 1fr);
      }

      .load-more-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* 回复列表样式 */
    .replies-list {
      margin-left: 2.5rem;
      margin-top: 1rem;
      padding-left: 1rem;
      border-left: 2px solid #e2e8f0;
    }

    .reply-item {
      display: flex;
      gap: 1rem;
      padding: 1rem 0;
    }

    .reply-item:not(:last-child) {
      border-bottom: 1px solid #f1f5f9;
    }

    .reply-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }

    .reply-content {
      flex: 1;
    }

    .reply-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .reply-author {
      font-weight: 500;
      color: #1a237e;
      font-size: 0.875rem;
    }

    .reply-time {
      color: #64748b;
      font-size: 0.75rem;
    }

    .reply-text {
      color: #334155;
      font-size: 0.875rem;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }

    .reply-to {
      color: #6366f1;
      font-weight: 500;
    }

    /* 回复输入框样式 */
    .reply-input-container {
      margin-top: 1rem;
      margin-left: 2.5rem;
      padding-left: 1rem;
    }

    .reply-input-wrapper {
      background: white;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .reply-input-wrapper textarea {
      min-height: 80px;
      margin-bottom: 0.5rem;
    }

    .reply-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
    }

    .cancel-btn,
    .submit-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .cancel-btn {
      background: transparent;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .cancel-btn:hover {
      background: #f1f5f9;
    }

    .submit-btn {
      background: #6366f1;
      color: white;
      border: none;
    }

    .submit-btn:hover {
      background: #4f46e5;
    }

    .submit-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
    }

    @media (max-width: 768px) {
      .replies-list {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }

      .reply-input-container {
        margin-left: 1rem;
        padding-left: 0.5rem;
      }
    }

      /* 移动端适配样式 */
      @media (max-width: 768px) {
        .page-header {
          min-height: 300px;
          padding: 2rem 1rem 4rem;
        }

        .api-title {
          font-size: 1.75rem;
          margin-bottom: 0.75rem;
        }

        .api-desc {
          font-size: 1rem;
        }

        .api-meta {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .meta-item {
          width: calc(50% - 0.375rem);
          justify-content: center;
          font-size: 0.8rem;
        }

        .main-content {
          margin-top: -3rem;
          padding: 0 1rem;
        }

        .content-card {
          padding: 1rem;
          margin-bottom: 1rem;
        }

        .card-header h2 {
          font-size: 1.25rem;
        }

        /* 评论区移动端优化 */
        .comments-section {
          padding: 0;
        }

        .comment-input-container {
          padding: 1rem;
          border-radius: 0.75rem;
        }

        .user-info {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .nickname-input,
        .add-nickname-btn {
          width: calc(100% - 48px); /* 减去头像宽度和间距 */
          margin-left: 48px; /* 头像宽度加间距 */
        }

        .comment-toolbar {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .emoji-picker {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          max-height: 50vh;
          border-radius: 1rem 1rem 0 0;
          z-index: 1001;
          transform: none;
          overflow-y: auto;
        }

        .emoji-categories {
          position: sticky;
          top: 0;
          background: white;
          padding: 0.5rem;
          z-index: 1;
        }

        .emoji-list {
          grid-template-columns: repeat(6, 1fr);
          max-height: none;
        }

        .comment-item {
          padding: 1rem;
          margin-bottom: 0.75rem;
        }

        .comment-avatar img {
          width: 36px;
          height: 36px;
        }

        .comment-header {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .comment-author {
          font-size: 0.875rem;
        }

        .comment-time {
          font-size: 0.75rem;
          width: 100%;
          padding-left: 0;
        }

        .comment-time::before {
          display: none;
        }

        .comment-actions {
          flex-wrap: wrap;
          gap: 0.75rem;
        }

        .action-btn {
          font-size: 0.8125rem;
          padding: 0.375rem 0.625rem;
        }

        /* 回复区域移动端优化 */
        .replies-list {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-item {
          padding: 0.75rem 0;
        }

        .reply-avatar img {
          width: 28px;
          height: 28px;
        }

        .reply-header {
          flex-wrap: wrap;
          gap: 0.375rem;
        }

        .reply-author {
          font-size: 0.8125rem;
        }

        .reply-time {
          font-size: 0.75rem;
          width: 100%;
        }

        .reply-text {
          font-size: 0.8125rem;
        }

        .reply-input-container {
          margin-left: 1rem;
          padding-left: 0.75rem;
          margin-top: 0.75rem;
        }

        .reply-input-wrapper {
          padding: 0.75rem;
        }

        .reply-input-wrapper textarea {
          min-height: 60px;
        }

        .reply-actions {
          flex-wrap: wrap;
          gap: 0.5rem;
        }

        .cancel-btn,
        .submit-btn {
          flex: 1;
          padding: 0.5rem;
          font-size: 0.8125rem;
          text-align: center;
        }

        /* 加载更多按钮移动端优化 */
        .load-more {
          margin: 1.5rem 1rem;
        }

        .load-more-btn {
          width: 100%;
          padding: 0.75rem;
          font-size: 0.875rem;
        }

        /* 添加底部安全区域 */
        .api-details {
          padding-bottom: env(safe-area-inset-bottom, 20px);
        }
      }

      /* 深色模式支持 */
      @media (prefers-color-scheme: dark) {
        .api-details {
          background: #1a1b1e;
          color: #e2e8f0;
        }

        .page-header {
          background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
        }

        .comment-input-container,
        .comment-item,
        .reply-input-wrapper {
          background: #2d2d30;
          border-color: #404040;
        }

        .nickname-input,
        textarea {
          background: #1a1b1e;
          border-color: #404040;
          color: #e2e8f0;
        }

        .comment-author,
        .reply-author {
          color: #e2e8f0;
        }

        .comment-text,
        .reply-text {
          color: #cbd5e1;
        }

        .action-btn {
          color: #94a3b8;
        }

        .action-btn:hover {
          background: #374151;
          color: #818cf8;
        }

        .action-btn.liked {
          color: #ef4444;
        }

        .action-btn.liked:hover {
          background: #450a0a;
        }

        .emoji-picker {
          background: #2d2d30;
          border-color: #404040;
        }

        .category-btn {
          color: #94a3b8;
        }

        .category-btn.active {
          background: #374151;
          color: #818cf8;
        }

        .emoji-btn:hover {
          background: #374151;
        }
      }

      /* 添加平滑滚动 */
      * {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

      /* 优化可点击区域 */
      button,
      .action-btn,
      .emoji-btn {
        min-height: 44px;
        min-width: 44px;
      }

      .copy-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }

      .copy-btn i {
        font-size: 0.875rem;
      }

      .response-example,
      .json-content {
        font-size: 0.8125rem;
        padding: 1rem;
      }
    

    /* 在线测试样式 */
    .test-content {
      padding: 1.5rem;
      background: white;
      border-radius: 1rem;
    }

    .method-select {
      margin-bottom: 1.5rem;
    }

    .method-select select {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      background: white;
      color: #374151;
      font-size: 0.875rem;
      transition: all 0.2s;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1em;
    }

    .method-select select:hover {
      border-color: #6366f1;
    }

    .method-select select:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .params-editor {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .param-row {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 0.75rem;
      align-items: center;
      background: #f8fafc;
      padding: 1rem;
      border-radius: 0.5rem;
      position: relative;
      transition: all 0.2s;
    }

    .param-row:hover {
      background: #f1f5f9;
    }

    .param-row input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      background: white;
      color: #374151;
      transition: all 0.2s;
    }

    .param-row input:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .param-row input::placeholder {
      color: #94a3b8;
    }

    .remove-param {
      padding: 0.75rem;
      border: none;
      background: #fee2e2;
      color: #dc2626;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }

    .remove-param:hover {
      background: #fecaca;
      transform: scale(1.05);
    }

    .remove-param i {
      font-size: 1rem;
    }

    .add-param-btn {
      padding: 0.75rem;
      border: 2px dashed #e2e8f0;
      background: white;
      color: #6366f1;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 500;
    }

    .add-param-btn:hover {
      border-color: #6366f1;
      background: #f8fafc;
      transform: translateY(-1px);
    }

    .add-param-btn i {
      font-size: 1rem;
    }

    .test-btn {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      position: relative;
      overflow: hidden;
    }

    .test-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
      );
      transition: all 0.5s;
    }

    .test-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
    }

    .test-btn:hover::before {
      left: 100%;
    }

    .test-btn:disabled {
      background: #e2e8f0;
      cursor: not-allowed;
      transform: none;
    }

    .test-btn i {
      font-size: 1rem;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .test-content {
        padding: 1rem;
      }

      .param-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
      }

      .remove-param {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
      }

      .param-row input {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
      }

      .add-param-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
      }

      .test-btn {
        padding: 0.875rem;
        font-size: 0.875rem;
      }
    }
  </style>